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
});
还没能找到富公或富婆包养,现在只能老老实实赚钱。害,生活真难!
今天也是一个卑微的前端切图仔┭┮﹏┭┮