VUE 利用 webpack 给开发环境配置不同的接口地址

我们项目开发的时候，往往会在同一个局域网进行开发，前后端分离同时进行开发。我们经常会调用本地准备好的数据，现在来配置一下接口。

1.配置位置

我们找到buid-->dev-server.js

dev-server2190946.png

2.配置接口

在dev-server.js文件中找到var app = express()我们从这开始编写接口地址

app-express812191046.png

var appData = require('../data.json')// data.json 准备好的数据
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings

var apiRouters = express.Router()
apiRouters.get('/seller', function(req, res) {
  res.json({
    errno: 0, // 错误码 根据业务不同
    data: seller
  })
})
apiRouters.get('/goods', function(req, res) {
  res.json({
    errno: 0,
    data: goods
  })
})
apiRouters.get('/ratings', function(req, res) {
  res.json({
    errno: 0,
    data: ratings
  })
})
app.use('/api', apiRouters)

3.测试接口地址

在命令窗口运行npm run dev

seller12190841.png goods12190808.png ratings12190909.png

在网页上面格式化json数据可以在google应用商店下载安装JSONView插件