vue项目中在本地模拟数据，请求数据步骤 vue

1.先将需要模拟的数据放入mock文件夹中

文章图片

2.在build文件夹中，找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json

//第一步 const portfinder = require('portfinder'),在后面加上 const express = require('express'); const app = express(); //请求server const appData = https://www.it610.com/article/require('../src/mock/a.json'); //加载本地数据文件const cityList = appData.city; //获取对应的本地数据const apiRoutes = express.Router(); app.use('/api', apiRoutes); //通过路由请求数据

//第二步找到devServer,在里面添加 before(app){ app.get('/api/cityList',(req,res)=>{ res.json({ errno:0, data:cityList }) }) }

3.引入成功后，加载数据，重新启动项目，打开http://localhost:8080/api/cityList

文章图片

【vue项目中在本地模拟数据，请求数据步骤】 4.在项目中展示Json 数据

const ERR_OK = 0; export default { name:'result', data () { return { // cityList:[] } }, components: { }, created(){ this.$http.get('/api/cityList').then((res) => { if (res.data.errno === ERR_OK) { console.log(res.data.data) } }); } }