vue cli3 获取本地json数据的方式
在网上的很多博客都是这样说的:
在vue-cli3中,存放静态资源的位置已经变成存放在public文件夹中了
但是我将文件放在我在根目录下新建的static文件夹也可以被获取到:
json文件数据内容如下:
Vue-cli3.0项目节省了很多文件,比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中
而我们在Vue-cli3.0中没有找到config.js文件,我们要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录):
config配置如下:
const express = require('express')
const app = express()
var panghu = require('./static/panghu') //本地json文件数据
var apiRoutes = express.Router();
app.use('/api', apiRoutes)
module.exports = {
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 //设置跨域,即将本文件内任何没有匹配到的静态文件,都指向跨域地址
},
}
如图:
在组件中获取:
结果: