用 vue 加載 json 的步驟

改了配置文件之后要重啟項目才有效呀

vue cli3以后 添加配置在根目錄下自己新建一個vue.config.js文件

其中代碼如下：

const express = require('express')
const app = express()
var panghu = require('./static/panghu')  //本地json文件數據
var apiRoutes = express.Router();
app.use('/api', apiRoutes)
const webpack = require('webpack')
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",

                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    },
    devServer: {
        before(app) {
            app.get('/api/panghu', (req, res) => {
                res.json({
                    errno: 0,   // 這里是你的json內容
                    data: panghu
                })
            })
        },
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null      //設置跨域，即將本文件內任何沒有匹配到的靜態文件，都指向跨域地址
    },
}

json文件格式如下 ： 放在static文件夾內（很多人說cli3以后的版本，靜態文件夾只有pbulic了 ，要放在public中）我的也有效

我用的axios調用的：

要安裝：cnpm install axios -D

引用：import axios from "axios";

axios.get("/api/panghu").then(data => {
 
     console.log(data.data.data);
 })