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