vue @vue/cli3环境变量和模式

问题描述

最近在学习mockjs，想根据本地模拟的数据，直接调用ajax请求，获取相关数据，如果是发布到生产，直接更改一个配置就可以了。

问题：webpack打包是使用的nodejs环境，那么如何通过修改nodejs环境中的配置文件，影响到发布到浏览器的配置文件呢

文章参考

1. 环境变量和模式

vue-cli3 的三种模式

development 模式

1. vue-cli-service serve 启动
2. 默认会去加载 .env ,.env.development, .env.development.local 配置文件
3. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中
4. 在vue文件中，使用 process.env 获取配置文件中的信息

production 模式

1. vue-cli-service build 或者 vue-cli-service test:e2e 启动
2. 默认会去加载 .env , .env.production, .env.production.local配置文件
3. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中
4. 在vue文件中，使用 process.env 获取配置文件中的信息

test 模式

1. vue-cli-service test:unit 启动
2. 默认会去加载 .env ,.env.test, .env.test.local 配置文件
3. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中
4. 在vue文件中，使用 process.env 获取配置文件中的信息

总结

1. 不管什么模式，都会去加载 .env 配置文件
2. 模式可以自定义，使用命令 vue-cli-service build --mode staging, staging就是自定义的模式名字
3. 配置文件则会加载 .env ,.env.staging, .env.staging.local 配置文件
4. 只有以 VUE_APP_ 开头的变量会被嵌入到客户端中

案例描述

package.json 文件

{
	...
	"scripts": {
		"serve": "vue-cli-service serve ",
		"dev": "vue-cli-service serve --mode development",
		"build": "vue-cli-service build",
		"lint": "vue-cli-service lint"
	  },
	...
}

1. vue-cli-service serve 是 vue-cli-service serve --mode development 的简写
2. 会将 .env 和 .env.development 和 .env.development.local 文件中的配置添加到 process.env 对象中

.env 文件

VUE_APP_CONTEXT=ctm01pec
VUE_APP_ISMOCK =true

注意：这里true不是boolean，而是字符串

// 根据Vue的环境变量模式中获取配置信息，异步加载配置文件
if (process.env.VUE_APP_ISMOCK === "true") {
  import('../mock/mock-data.js').then(_ => {
    console.log("引入mock数据成功")
   })
}

.env.development 文件

VUE_APP_NAME=huangbiao
VUE_APP_AGE=18
VUE_APP_ADDRESS=222222
VUE_APP_ASSETS=static

main.js 启动文件

import Vue from 'vue'
import App from './App.vue'
console.log(process.env)
new Vue({
  render: h => h(App),
}).$mount('#app')

打印结果

BASE_URL: “”
NODE_ENV: “development”
VUE_APP_ADDRESS: “222222”
VUE_APP_AGE: “18”
VUE_APP_ASSETS: “static”
VUE_APP_CONTEXT: “ctm01pec”
VUE_APP_ISMOCK: “huangbiao”
VUE_APP_NAME: “huangbiao”
username: “huanghaili”

vue-cli3 是如何实现环境变量和模式关联的

VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中

最大的功臣是 webpack.DefinePlugin