vue版本高的已经删除了dev-server.js文件,高版本的vue需要在build/webpack.dev.conf.js文件下配置,接口。具体操作如下:
1:第一步
找到 const portfinder = require('portfinder')
在后面添加下面内容:
const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件
var seller=appData.seller
var goods=appData.goods
var ratings=appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
如图:
【注】seller goods是自己需要请求的数据名称,根据自己而定。具体看json数据。这个json数据主要三部分构成,即seller goods ratings。
2:第二步
找到devServer:
函数,添加内容如下:
before(app){
app.get('/api/seller', (req,res) =>{
res.json({
errno:0,
data:seller
})
})
app.get('/api/goods', (req,res) =>{
res.json({
errno:0,
data:goods
})
})
app.get('/api/ratings', (req,res) =>{
res.json({
errno:0,
data:ratings
})
})
},
如图:
3:第三步
- 打开控制台:win+R ,输入cmd打开控制台
- 输入npm run dev
- 等待出现下面即可
4: 第四步
打开浏览器输入:http://localhost:8080/api/seller查看是否成功,如果配置正确出现下面的情况即可
5:如果为低版本则配置dev-server.js接即可
具体找到
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var foods = appData.foods
var pice = appData.pice
var apiRoutes = express.Router()
apiRoutes.post('/foods', function (req, res) {
res.json({
errno: 0,
data: foods
});
})
apiRoutes.get('/seller', function (req, res) {
res.json({
errno: 0,
data: seller
});
})
apiRoutes.get('/goods', function (req, res) {
res.json({
errno: 0,
data: goods
})
})
apiRoutes.get('/ratings', function (req, res) {
res.json({
errno: 0,
data: ratings
});
})
apiRoutes.get('/pice', function (req, res) {
res.json({
errno: 0,
data: pice
});
})
app.use('/api',apiRoutes)