vue-cli搭配mockjs模擬可抓到的請求

vue-cli搭配mockjs模擬可抓到的請求

1. 書寫node服務，並返回mock的數據
2. 正確配置vue-cli的proxy
3. 正確配置命令行先啓動步驟1的服務，再啓動vue-cli

步驟說明

1. 在項目的任意路徑創建mockServer.js（名稱自定義）文件，書寫node服務，並返回mock的數據，該文件的代碼如下

/**
* 請用yarn或npm自行下載安裝包
* 安裝包包括 yarn add / npm install
* 	express （--save-dev）
*	mockjs（--save-dev）
*/
let express = require('express') // 引入express
let Mock = require('mockjs') // 引入mock
let app = express() // 實例化express

// attendance/mbo/index 寫自己的請求地址
app.use('/attendance/mbo/index', function (req, res) {
 res.json(
   Mock.mock({
     'rspCode': '0',
     'data|1-3': [
       {
         'key|+1': 1,
         'des|1': ['這是描述'],
         'info|1': [
           'mock測試數據1',
           'mock測試數據2' ]
       }
     ]
   })
 )
})

app.listen('8090', () => {
 console.log('監聽端口 8090')
})

在進行繼續下一步之前，先看如下package.json的一段代碼

"scripts": {
   "dev": "vue-cli-service serve",
   "mock": "vue-cli-service serve",
   "build.prod": "vue-cli-service build",
   "build.test": "vue-cli-service build",
   "mockServer": "node ./mockServer.js"
 }
 
該代碼爲自定義命令行，我的做法是針對不同命令區別環境變量，進而進行打包、本地服務的開啓，如：

yarn run dev			  	//本地vue項目開啓，全局的環境變量爲dev
yarn run mock 				//本地vue項目開啓，全局的環境變量爲mock
yarn run build.prod  		//打包vue項目，全局的環境變量爲prod，用於線上的生產代碼
yarn run build.test   		//打包vue項目，全局的環境變量爲test，用於線上的測試代碼
yarn run mockServer  		//開啓步驟1的8090本地服務端口
注： yarn換成npm也可以，最後實現的效果爲隨着命令1和命令2的切換，我可以請求本地mock數據和項目的測試數據

2. 正確配置vue-cli的proxy，我的vue.config.js是這樣寫的

/**
*  本js代碼主要解決問題如下
* 	1.定義項目的全局變量
*   2.解決跨域
*   3.當全局變量爲mock時，開啓本地代理至http://localhost:8090，實現本地開啓服務
* */

const webpack = require('webpack')
const original = JSON.parse(process.env.npm_config_argv).original
/**
*  根據如上圖的運行命令獲取環境變量 
* 	最後環境變量賦值給NODE_ENV
* */
const NODE_ENV = original.includes('dev') ? 'dev' : original.includes('mock') ? 'mock' : original[0].includes('.') ? original[0].split('.')[1] : original[1].split('.')[1]
/* 
* 定義vue需要代理的服務地址，解決跨域問題
* 這裏跟裏環境變量，自定義target代理域名
*/
const target = NODE_ENV === 'mock' ? 'http://localhost:8090' : 'https://www.******'

module.exports = {
   /*
   * configureWebpack：利用webpack設置該項目的全局變量，webpack4.0以上支持該寫法，高版本vue-cli已經集成了webpack4.0以上
   * 以下代碼設置全部變量爲ENV 取值爲NODE_ENV
   */
 configureWebpack: config => {
   config.plugins.push(
     new webpack.DefinePlugin({
       ENV: JSON.stringify(NODE_ENV)
     }))
 },
 //proxy爲項目設置代理，解決跨域
 devServer: {
   'proxy': {
     '/attendance': {
       target,
       'changeOrigin': true
     }
   }
 }
}

3. 驗證我們的服務及與項目配合使用
   3.1 開啓步驟1的服務 yarn run mockServer，在電腦地址欄中敲擊地址http://localhost:8090/attendance/mbo/index，若瀏覽器有返回的數據，如下圖，則證明本地數據可以正常訪問了
   3.2 開啓本地mock模擬數據的vue項目，yarn run mock
   3.3 項目中 數據請求，請求地址爲attendance/mbo/index則可以請求本地的mock數據了。

4. 優化node
   爲了node啓動的服務可以熱重啓（修改node配置後，自動重啓服務），我們需要安裝nodemon，即： yarn add nodemon -D
   然後在package.json中修改scripts中的mockServer爲nodemon ./mockServer.js

	
 "scripts": {
    "dev": "vue-cli-service serve",
    "mock": "vue-cli-service serve",
    "build.prod": "vue-cli-service build",
    "build.test": "vue-cli-service build",
    "mockServer": "nodemon ./mockServer.js"
  }