package.json文件
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build:intranet": "vue-cli-service build --mode intranet",
"build:test": "vue-cli-service build --mode test",
"build:pre": "vue-cli-service build --mode pre",
"build": "vue-cli-service build --mode production"
},
mode 和 环境文件的关系
.env # 在所有的环境中被载入
.env.[mode] # 只在指定的模式中被载入
如上我们在package.json定义的build模式,对应一下的环境文件:
环境文件目录
.env.development
VUE_APP_CURRENTMODE = 'development'
# base host
VUE_APP_BASE_HOST = ''
# 文件路径
VUE_APP_FILE_PATH = ''
.env.production
VUE_APP_CURRENTMODE = 'production'
# base host
VUE_APP_BASE_HOST = '//www.example.com'
# 文件路径
VUE_APP_FILE_PATH = '/secondPath/'
.env.test
VUE_APP_CURRENTMODE = 'test'
# base host
VUE_APP_BASE_HOST = '//test.example.com:6060'
# 文件路径
VUE_APP_FILE_PATH = '/secondPath/'
当运行 vue-cli-service 命令时,所有的环境变量都从对应的环境文件中载入。
如果文件内部不包含 NODE_ENV 变量,它的值将取决于模式,例如,在 production 模式下被设置为 "production",在 test 模式下被设置为 "test",默认则是 "development"。
自测发现:
- 如果配置mode 比如(
vue-cli-service build --mode hello
),且没有 .env.hello文件,也没有配置NODE_ENV属性
结果: 打印的值是NODE_ENV: 'development'
- 还是配置
--mode hello
,如果有.env.hello文件,且文件为空
结果: 打印的仍然是NODE_ENV: 'development'
- 还是配置
--mode hello
,如果有.env.hello文件,且文件中配置NODE_ENV = 'hello123'
结果: 打印的仍然是NODE_ENV: 'hello123'
- 如果是 test(有 .env.test文件)
结果: 打印的值是NODE_ENV: 'test'
,且有自己配置的 VUE_APP开头的属性值 - 如果是 pre(没有 .env.pre文件)
结果: 打印的值是NODE_ENV: 'development'
最终结论:
- NODE_ENV属性值 一般只有 production/test/development 三种值(没有在.env.[mode]文件中配置该值的前提下)
production对应production、test对应test、其他默认都是development - 如果在 .env.[mode] 文件中设置了 NODE_ENV值,则覆盖
以下三者的关系、优先级
- package.json 中scripts中定义的 --mode
- 根目录下对应的文件名, 例如 .env.development、.env.test、.env.production
- 环境文件中定义的环境变量 NODE_ENV的取值,如果在环境文件中定义了,则去该值,否则即取 production/test/development 三值之一
请注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
vue.config.js中的使用
const IS_RELEASE = process.env.VUE_APP_CURRENTMODE === 'production';
const IS_DEV = process.env.VUE_APP_CURRENTMODE === 'development';
// cdn路径
const cdnPath = `${process.env.VUE_APP_BASE_HOST}${process.env.VUE_APP_FILE_PATH}`;
console.log('process.env', process.env);
module.exports = {
publicPath: IS_DEV ? '' : cdnPath,
lintOnSave: false,
assetsDir: 'assets',
// 正式环境关掉 sourceMap
css: {
sourceMap: !IS_RELEASE,
},
productionSourceMap: !IS_RELEASE,
// ...
}
VUE Cli 模式和环境变量:
https://cli.vuejs.org/zh/guide/mode-and-env.html#模式