vue-cli中的 mode模式、env环境文件，以及其中定义的环境变量

2023-09-24 18:49:27

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#模式

vue-cli中的 mode模式、env环境文件，以及其中定义的环境变量

码农公寓

相关文章