Vue.js如何搭建本地dev server和json-server 模擬請求服務器

前言:vue-cli(版本更新)，由原來的2.8.1升級為2.9.1。主要改變是原來在build文件夾下的dev-server.js刪掉了，增加了webpack.dev.conf.js。

所以這次講的都是基於2.9.1 在webpack.dev.conf.js 添加.對於這些服務器配置，如果設置后，一定要重啟然后cnpm/npm run dev。

1.本地dev server,在webpack.dev.conf.js最后添加如下代碼，本地的db.json，是一些json數據。

var port = process.env.PORT || config.dev.port
const 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(port+1, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:'+(port+1)+ '\n')
})

db.json

  "login": {
    "username": "yudongdong",
    "userId": 123123
  },
  "getPrice": {
    "amount": 678
  },
  "createOrder": {
    "orderId": "6djk979"
  },

然后進入根目錄config/index.js，修改代理路徑，執行監聽端口url

然后組件內部請求代碼部分：

2.如何搭建json-server？因為json-server有個弊端，只支持get請求。

首先下載json-server組件：cnpm install json-server --save

然后在webpack.dev.conf.js如下代碼。

var jsonServer = require('json-server') //引入文件
var apiServer = jsonServer.create(); //創建服務器
var apiRouter = jsonServer.router('db.json') //引入json 文件 ，這里的地址就是你json文件的地址，我再static下的建立了一個文件夾mock，然后把json文件放在里面
var middlewares = jsonServer.defaults(); //返回JSON服務器使用的中間件。
apiServer.use(middlewares)
apiServer.use('/api',apiRouter)
apiServer.listen( 9527 ,function(err){ //json服務器端口:9527
  if(err){
    console.log(err)
    return
  }
  else
    console.log('JSON Server is running')  //json server成功運行會在git bash里面打印出'JSON Server is running'

然后進入根目錄config/index.js，修改代理路徑，執行監聽端口url

關於組件內部請求部分跟dev server一樣沒有區別，只是json -server不支持post請求而已。

 參考:

https://blog.csdn.net/qq_41882147/article/details/80284935

json-server教程：

https://www.jianshu.com/p/ebb823bfbcb2

https://www.cnblogs.com/fly_dragon/p/9186722.html