vue2.0 webpack.dev.conf.js下expre

第一步

在const portfinder = require('portfinder')下面写入
/express 尝试导入/
const express=require('express')
const app=express()//请求server
let appData=require('../db.json')//加载本地数据文件
let getNewsList=appData.getNewsList//获取对应的本地数据
let login=appData.login
let getPrice=appData.getPrice
let createOrder=appData.createOrder
var apiRoutes=express.Router()//获取一个express的路由实例
app.use('/api',apiRoutes)//通过路由请求数据
/express 导入结束/

第二步

devServer: { 下在方法的结尾 加入before 方法
//添加express 模拟数据
before(app){
app.get('/api/getNewsList',(req,res)=>{
res.json({
data:getNewsList
})//接口返回json数据 上面配置的数据getNewsList就赋值给data请求后调用
}),
app.get('/api/login',(req,res)=>{
res.json({
data:login
})
}),
app.get('/api/getPrice',(req,res)=>{
res.json({
data:getPrice
})
}),
app.get('/api/createOrder',(req,res)=>{
res.json({
data:createOrder
})
})
}

第三步 调用
created:function(){
this.$http.get('api/getNewsList').then((res)=>{
this.newsList=res.data.data
console.log(res.data)
},(err)=>{
console.log(err)
})
},
需注意 路径的拼接问题

image.png
image.png
image.png