新版 vue-cli 如何使用 express 来 mork

Categories Vue, 项目配置

前提是已经安装好了 node 环境,并且初始化好了项目。

一、提供 json 数据文件。
在项目根目录下,新建一个 JSON 文件 db.json。

二、配置webpack.dev.conf.js

// 新版配置
var express = require(‘express’)
var apiServer = express()
var bodyParser = require(‘body-parser’)
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require(‘fs’)
apiRouter.route(‘/:apiName’)
.all(function (req, res) {
fs.readFile(‘./db.json’, ‘utf8’, function (err, data) {
if (err) throw err
var data = JSON.parse(data)
if (data[req.params.apiName]) {
res.json(data[req.params.apiName])
}
else {
res.send(‘no such api name’)
}
})
})
apiServer.use(‘/api‘, apiRouter);
apiServer.listen(3000, function (err) {
if (err) {
console.log(err)
return
}
console.log(‘Listening at http://localhost:’ +3000 +’\n’)
})
此处端口可以指定,也可以用变量 port + 1   (默认port为8080) 另外反向代理配置需要相同
三、配置反向代理
需要注意的是:webpack.dev.conf.js 中  apiServer.use(‘/api‘, apiRouter);  已经使用了 /api ,而反向代理中也使用了/api
所以 目前访问路径为:localhost:8080/api/api/xxx
(此处重写了反向代理新路径,如果pathRewrite 中路径为 / 的话 —–> localhost:8080/api/xxx)
修改反向代理 配置 /api —-> /
此时访问路径 为 localhost:8080/api/xxx
至此可以完全使用,可参见:新版 vue-cli 如何使用 json-server 来 mork
思考:webpack.dev.conf.js 中 把 /api —-> / ,而不修改 反向代理中的 /api 是否可行呢? 可以试一试哦~
此时访问路径为:http://localhost:8080/getNewsList

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *