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