vue打包模式

标题

一、cross-env

为了在window和linux上都可以设置上临时的进程环境变量（也就是node打包时候所需要的环境变量），需要使用到cross-env做跨平台环境变量配置，配置代码可以在node_modules>.bin>cross-env下找到;

二、dotenv

dotenv是一个读取.env开头类型文件的npm插件，vue-cli-service中使用该插件读取环境变量;

三、vue-cli-service

1.打包模式

vue-cli-service打包有三个模式，即development 、test 、production；不同的模式会使用不同的webpack配置

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

加载哪种模式取决于NODE_ENV设置的值，否则就是取默认值

• 一般情况下，使用不同的命令加载的模式也会不同；serve运行development模式，test运行test模式，build运行production模式；
• 如果使用"build": "vue-cli-service build -mode test指定mode参数为test，则该条命令使用test模式
• 如果使用"build": "vue-cli-service build -mode custom指定mode参数为自定义的参数，则使用development模式，但是加载配置文件还是.env.custom配置文件
• 如果指定mode为test，但是.env加载的NODE_ENV为production，则加载production模式
• 如果外部环境变量存在NODE_ENV为test，则加载test模式

2.环境变量加载优先级

使用cross-env载入的环境变量>.env.mode环境变量>.env环境变量>mode参数设置>vue-cli-service命令默认环境变量；

因为需要在vue-cli-service执行之前就设置好环境变量，所以cross-env需要在vue-cli-service之前执行，例如下面代码

"build:test": "cross-env NODE_ENV=test vue-cli-service build"

为什么使用cross-env载入的环境变量不会被.env.mode环境变量覆盖，而是相反会覆盖.env.mode文件的环境变量呢？

因为vue-cli-service是在代码编译的时候检查源代码中process.env全局变量，然后使用dotenv加载好的配置文件替换掉该变量;
也就是本质上并没有将.env配置文件环境变量设置到node进程环境变量中，也没有这个必要，所以只要在vue-cli-service执行之前存在的环境变量都可以正常替换掉.env配置文件的环境变量；