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'
  }
}