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

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模式,对应一下的环境文件:
环境文件目录
vue-cli中的 mode模式、env环境文件,以及其中定义的环境变量

.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"。

自测发现:

  1. 如果配置mode 比如(vue-cli-service build --mode hello),且没有 .env.hello文件,也没有配置NODE_ENV属性
    结果: 打印的值是 NODE_ENV: 'development'
  2. 还是配置 --mode hello,如果有.env.hello文件,且文件为空
    结果: 打印的仍然是 NODE_ENV: 'development'
  3. 还是配置 --mode hello,如果有.env.hello文件,且文件中配置 NODE_ENV = 'hello123'
    结果: 打印的仍然是 NODE_ENV: 'hello123'
  4. 如果是 test(有 .env.test文件)
    结果: 打印的值是 NODE_ENV: 'test',且有自己配置的 VUE_APP开头的属性值
  5. 如果是 pre(没有 .env.pre文件)
    结果: 打印的值是 NODE_ENV: 'development'

最终结论:

  1. NODE_ENV属性值 一般只有 production/test/development 三种值(没有在.env.[mode]文件中配置该值的前提下)
    production对应production、test对应test、其他默认都是development
  2. 如果在 .env.[mode] 文件中设置了 NODE_ENV值,则覆盖

以下三者的关系、优先级

  1. package.json 中scripts中定义的 --mode
  2. 根目录下对应的文件名, 例如 .env.development、.env.test、.env.production
  3. 环境文件中定义的环境变量 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#模式

上一篇:canvas 移动尾巴处理


下一篇:matplot绘图