vue-cli-mode

发表于 | 分类于

vue-cli4 mode、NODE_ENV、webpack mode

  • 最近使用vue-cli4初始化了一个项目，对其中mode、NODE_ENV、webpack mode的关系有点迷
  • 所以花了点时间整理了下

vue-cli4 环境变量

声明环境变量

  • vue-cli可通过.env前缀的环境文件来声明环境变量
1
2
3
# .env
Foo=Bar
VUE_APP_TITLE=标题
  • 被载入的变量将会对vue-cli-service的所有命令、插件和依赖可用

客户端可以使用的环境变量

  • 在客户端(src/目录下)可以使用process.env.XXX来引用环境变量，主要有下面的变量可以引用
    • 环境文件中以VUE_APP_开头的环境变量
    • NODE_ENV ， 会是 development、production 或 test 中的一个
    • BASE_URL，会和 vue.config.js 中的 publicPath 选项相符

vue-cli mode

默认 mode

  • mode可以理解为vue-cli运行的一个环境，一个标志量；内部的插件依赖此变量来决定是否启用
  • vue-cli mode默认只会有development、production、test三种取值
  • development
    • 会在调用vue-cli-service serve命令时，mode被设置为development
  • production
    • 会在调用vue-cli-service build 和vue-cli-service test:e2e命令时，mode被设置为production
  • test
    • 会在调用vue-cli-service test:unit命令时，mode被设置为test
  • 每个模式都会将NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为development

覆盖、自定义 mode

  • 可以使用vue-cli-service xxx --mode custom来覆盖原有mode(自定义 mode)

vue-cli mode 和环境文件的关系

  • 当指定了mode时(无论是命令默认值还是--mode 自定义的)
  • 会去项目根目录下找到.env.[mode]文件，读取并设置其中的环境变量
  • 如果mode的值是除development、production、test以外的值，则需要在环境文件中手动指定NODE_ENV值，这样vue-cli内部的插件才知道需要工作在哪种环境下
  • 例子
  • vue-cli-service build --mode staging，使用--mode覆盖了默认的production模式，则需要在.env.staging环境文件中手动指定NODE_ENV
1
2
3
# .env.staging
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
  • vue-cli mode和NODE_ENV及webpack mode三者间是如何互动，下面会解释

vue-cli mode、NODE_ENV、webpack mode 三者的关系

webpack mode

  • webpack 从 4 开始，支持mode选项，根据mode自动开启一些插件和优化
  • mode的可选值有
    • development
      • 告知webpack启用 NamedChunksPlugin 和 NamedModulesPlugin
    • production
      • 告知webpack启用 FlagDependencyUsagePlugin、 FlagIncludedChunksPlugin 、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin、UglifyJsPlugin
      • 启用压缩、优化
  • vue-cli内部会使用到webpack，所以也需要设置webpack mode

三者关系

  • 首先在vue-cli中NODE_ENV默认被设置为development，除非vue-cli mode为production或者test
  • 其次，环境文件中的NODE_ENV具有更高的优先级，即如果环境文件中也有设置NODE_ENV，则会覆盖上一步的NODE_ENV
  • 最后webpack mode是根据上一步的NODE_ENV值来确定的，只要值不是production，则webpack都会运行在development模式

例子 1

  • vue-cli-service serve
    • mode初始为development，NODE_ENV初始为development
  • .env.development
1
NODE_ENV=production # 被覆盖为production
  • NODE_ENV最终为production，所以webpack mode最终为production，会启用压缩、优化等行为

例子 2

  • vue-cli-service build --mode staging
    • 通过cli参数覆盖默认mode，此时mode为staging
  • .env.staging
1
2
3
# 未设置NODE_ENV

VUE_APP_TITLE=标题
  • 由于使用了自定义mode、环境文件中又没有设置NODE_ENV，导致NODE_ENV为默认值development、所以webpack mode为development，并不会启用压缩等行为

例子 3

  • vue-cli-service build --mode staging
    • 通过cli参数覆盖默认mode，此时mode为staging
  • .env.staging
1
2
NODE_ENV=production # 设置NODE_ENV
VUE_APP_TITLE=标题
  • 环境文件中设置了NODE_ENV=production，所以webpack mode为production

例子 4

  • vue-cli-service build --mode staging
    • 通过cli参数覆盖默认mode，此时mode为staging
  • .env.staging
1
2
NODE_ENV=staging # 设置NODE_ENV为非production、development、test的值
VUE_APP_TITLE=标题
  • 环境文件中设置了NODE_ENV=staging，所以webpack mode会运行在默认development环境下

参考