浅析vue-cli如何配置NODE_ENV等各种环境变量及NODE_ENV设置为test、development以及其他值时会出现什么情况
一、环境变量配置
在项目开发中我们需要配置环境变量:开发环境,生产环境和测试环境。在cli 2.0的版本中我们是通过在config文件夹进行配置的,vue/cli 3.0相对简单,只需要在项目根目录创建 .env 文件即可。以下是环境对应文件名和命令
模式 |
对应npm命令 | 对应文件名称 |
development | server | .env.development |
production | build | .env.production |
test | test | .env.test |
需要注意的是: process.env.NODE_ENV
为默认变量,会自动设置为上边对应的模式名称
其他变量必须以 VUE_APP_ 开头,被载入的变量将会被vue-cli-service的所有命令、插件、依赖可用。
二、自定义模式
默认的三种模式也许并不能满足我们的所有使用场景,使用自定义模式可以很好地解决这个问题。比如我们的测试网址,就需要一个自定义 gray 模式。
// 1、修改package.json添加一行命令
"gray": "vue-cli-service build --mode gray"
// 2、添加.env.gray文件:在项目根路径创建.env.gray文件,内容为
NODE_ENV = production
VUE_APP_URL=https://**.cc/
现在 gray 环境就会自动引用自己环境内的变量啦,需要注意的是NODE_ENV的名字打包时为production,开发运行为development,否则会造成环境找不到对应的模式配置,打包出的项目体积也会巨大无比。
关于 .env 文件中的内容:VUE_APP_URL 是在 .env.* 文件中定义的,在项目启动时,vue-cli 会将以 VUE_APP_ 开头的变量读取至环境变量,这是 vue-cli 强制要求的。“你想用我的工具,就得遵循我定的规则”。其实这背后是一系列工具链(webpack
+ dotenv
+ webpack DefinePlugin
)相互作用的成果。
三、NODE_ENV 设置为 test、development 以及 其他值时会出现什么情况?
在自定义配置Vue-cli 的过程中,突然有了下面的疑问:为什么打包扔测试环境时,不能直接改变其 NODE_ENV 值,而是通过VUE_APP_ENV_NAME (以VUE_APP_开头的变量)来区分呢?
后来想想这是不同的配置策略导致的,虽然我扔的是测试环境,但构建出来的包还是要生产环境的包,由此我又产生了另一个疑问:我在vue-cli-service build 时,NODE_ENV 设置成其他值,会发生什么?打出来的包是什么样子?
1、下面说说如果直接改变其 NODE_ENV 值会发生什么?
简单来说,打包出来的文件会跟production模式下打包的文件不一样,没有集成production包的各个优点。具体来说会有下面几种情况:
(1)直接 NODE_ENV = ‘test’, 它会创建一个优化过,并且旨在用于单元测试的 webpack 配置,它并不会处理图片以及一些对单元测试非必需的其他资源。表面来看,就是没有进行代码分割只有一个js文件,以及没有hash等。
(2)NODE_ENV=“development”,它会创建一个 webpack 配置,该配置启用热更新,但不会对资源进行 hash 也不会打出 vendor bundles,打包出来的文件跟NODE_ENV="development"模式下打出来的包一样。
(3)NODE_ENV=“someone”,环境变量随便给一个值,它会默认为NODE_ENV=“development” 的打包策略。包内的内容如下:
所以运行 vue-cli-service build 命令时,无论部署到哪个环境,都应该始终把 NODE_ENV 设置为 “production“ ,区别环境时可以以 VUE_APP_ 开头的变量命名赋值。
详见官方文档:https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F