vue cli3 获取本地json数据的方式

在网上的很多博客都是这样说的:

在vue-cli3中,存放静态资源的位置已经变成存放在public文件夹中了

但是我将文件放在我在根目录下新建的static文件夹也可以被获取到:
vue cli3 获取本地json数据的方式

json文件数据内容如下:
vue cli3 获取本地json数据的方式

Vue-cli3.0项目节省了很多文件,比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中

而我们在Vue-cli3.0中没有找到config.js文件,我们要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录):
vue cli3 获取本地json数据的方式

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      //设置跨域,即将本文件内任何没有匹配到的静态文件,都指向跨域地址
    },
}

如图:
vue cli3 获取本地json数据的方式

在组件中获取:
vue cli3 获取本地json数据的方式

结果:
vue cli3 获取本地json数据的方式

上一篇:vue-cli3+笔记


下一篇:vue-cli3项目编译配置Tomcat下运行