vue-cli json-server 配置 同时运行
vue.js开发,前端完全模拟后端接口,实现前端完全独立开发。
基于vue-cli3 脚手架搭建前端页面,json-server配置模拟api数据接口。
vue-cli3按官方文档配置即可。
主要讲解json-server配置:
1. 只用于开发环境使用json-server,所以如下安装
npm install json-server --save-dev
2. json-server,在项目src文件夹下新建json-server文件夹,结构如下:
3. 文件内容:
server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const db = require('./db')
const middlewares = jsonServer.defaults()
server.use(middlewares)
server.use(jsonServer.rewriter({
'/user/login': '/user_login',
'/user/logout': '/user_logout'
}))
server.use(jsonServer.router(db))
server.listen(3000, () => {
console.log('JSON Server is running')
})
db.js
module.exports = {
'user_login': require('./data/user/login.json'),
'user_logout': require('./data/user/logout.json')
}
login.json
{
"code": 100,
"data": {
"message": "success",
"token": "123456"
}
}
4. 配置package.json
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "mock": "concurrently \"vue-cli-service serve\" \"node ./src/json-server/server.js\"" }
新建mock运行指令,其目的是在运行vue-cli的时候同时启动json-server,此处安装了concurrently插件,用于支持并行运行。
安装concurrently: npm install concurrently --save-dev
在终端输入如下指令 即可启动项目:
npm run mock
Tips: json-server启动在3000端口,此处需要配置vue-cli的代理服务:
vue.config.js
module.exports = { devServer: { proxy: 'http://127.0.0.1:3000' } }