vue cli4 中mockjs在dev环境和build环境的配置

如有错误请告知！！！

cli4中环境配置

这里参考了这位的文章: vue-cli4.0多环境配置，变量与模式.写的很详细，大家可以移步去康康~~~

默认情况下，Vue cli有三种开发模式:development,production,test.

自定义配置环境

cli4在自定义配置环境时，需要自己添加文件，像👇👇👇这样：

这两个文件是我要自定义的开发环境(.env.development)和生产环境(.env.production)的配置文件。
.env.development:

NODE_ENV='development'
// 注意自定义的变量名前面一定要加VUE_APP_ ，在项目中如果想要获取这里的自定义变量可用process.env.比如，想在mainjs里打印下面定义的url可以用window.console.log(process.env.VUE_APP_URL)
VUE_APP_URL = 'http://xxxx.xxx.xx.xxx:xxxx'   // 这个是在开发环境中接口要请求的地址
VUE_APP_MOCK = true // 这个是在开发环境中加入mockjs模块，这里设置的true或flase在下面mockjs里会写。如果你的项目中不用mockjs可以不加这一行

.env.production:

NODE_ENV='production'
VUE_APP_URL = ''
VUE_APP_MOCK = false 

现在完事具备，只差package.json配置了！！！
package.json:

"scripts": {
    "dev": "vue-cli-service serve --mode development", // dev是给开发环境自定义的名字，随便写，npm run 后面加这个名字。这里mode后面的 development就是上面.env.development文件中的VUE_APP_MODE的值，运行dev环境就直接 npm run dev
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  }

运行dev环境 ： npm run dev

// 理论知识见下面👇，如果单纯想实现功能，这块可以忽略。

.env                // 在所有的环境中被载入
.env.local          // 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         // 只在指定的模式中被载入
.env.[mode].local   // 只在指定的模式中被载入，但会被 git 忽略

这里我理解的是当运行程序时，执行顺序: .env(所有环境) -> .env.[mode] (特定环境)。比如，当运行开发环境时，npm run dev ，执行顺序: 先.env 后.env.development。
（我猜这个.env是package.json—scripts中每个mode中vue-cli-service 后面的 serve/build，不过我没有证据！如果大家有知道的请教教我！！！）

mockjs在vue cli4开发环境中的配置及使用

1.安装mockjs
进入项目文件夹，执行命令：npm install mockjs --save，将mockjs安装到项目中。

2.创建mock文件夹
在src目录下，创建mock文件夹，mock文件夹下创建index.js

index.js
一定注意！！！get请求需要把url写成正则，否则不能拦截

import Mock from 'mockjs'; // 引入mockjs
const data = {
  Message: '查询成功',
  Code: 1,
  Data: {
    Id: '',
    name: ''
  }
};
// 拦截请求延迟
// Mock.setup({
//   timeout: 3000
// });

// 一定注意！！！👇👇 get请求需要把url写成正则，否则不能拦截
Mock.mock(
  /https:\/\/www.baidu\.com\//,
  'get',
  data
); // 参数分别为请求要拦截的url(项目中请求地址只要 >包含< 了这个参数,就会被拦截，第二个参数是请求方式，第三个参数是请求之后的response数据)

export default Mock;

.env.development:

NODE_ENV='development'
VUE_APP_URL = 'http://xxxx.xxx.xx.xxx:xxxx'  
VUE_APP_MOCK = true 

VUE_APP_MOCK = true 是为了在mainjs文件判断当前运行环境中是否要加入mockjs。

mainjs:
添加一行代码

process.env.VUE_APP_MOCK === 'true' && require('./mock/index'); 
// 如果process.env.VUE_APP_MOCK === 'true' 则引入mock文件夹下的index.js中的拦截.
// 至于true为什么要加引号，大家体验一下不加的情况就能明白了，.env.development文件中的value都自动加了引号。不信的话试试下面这行展开
// console.log(process.env.VUE_APP_MOCK, typeof process.env.VUE_APP_MOCK);

现在vue项目中就可以使用了：

this.axios.get('https://www.baidu.com/').then(res => {
	console.log(res.data) // 这个的返回结果就是mock-> index.js文件中的data
});

还没能找到富公或富婆包养，现在只能老老实实赚钱。害，生活真难！

今天也是一个卑微的前端切图仔┭┮﹏┭┮