Vue项目加载本地的json文件模拟请求后台数据

1. 安装express和axios

cnpm i express --save &  cnpm i axios --save

2. 在main.js中引入axios

import axios from ‘axios’；

Vue.prototype.$axios = axios;

3. 在build/webpack.dev.conf.js中配置express并设置路由规则

const CopyWebpackPlugin = require('copy-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')const portfinder = require('portfinder')
// 增加express startconst express = require('express');const app = express();const appData = require('../static/json/appData.json');const runRedLight = appData.runRedLight;const redLightRoad = appData.redLightRoad;const apiRoutes = express.Router();app.use('/api',apiRoutes);// 增加express end
const HOST = process.env.HOSTconst PORT = process.env.PORT && Number(process.env.PORT)

在devserver中添加路由规则

    watchOptions: { poll: config.dev.poll, }, //express 添加start before(app){ app.get('/api/light',(reg,res)=>{ res.json({ errno:0, data:runRedLight }) }), app.get('/api/road',(reg,res)=>{ res.json({ errno:0, data:redLightRoad }) }) } //express end },

最后就是在Vue文件中使用了

created(){ this.$axios.get('/api/light').then(res=>{ console.log(res.data); }) }

阅读更多