vue不同环境的压包配置方法(vue-cli 3.0)

最新的vue-cli 3.0变化非常大。但是不同环境的压包配置方法更加简单了。

环境变量与模式

查看官方文档

我们主要配置两种模式，测试环境及生产环境。

我们在项目根目录创建两个文件：

.env.development

VUE_APP_API_URL_WEB=https://testa-test.com
VUE_APP_API_URL_APP=https://testb-test.com

这个配置文件用于vue-cli-service serve，如果有修改，需要重新启动项目才会使用最新的变量。

.env.production

VUE_APP_API_URL_WEB=https://testa.com
VUE_APP_API_URL_APP=https://testb.com

这个配置文件用于vue-cli-service build。

package.json配置修改

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
+ "build:prod": "vue-cli-service build --mode production",
+ "build:dev": "vue-cli-service build --mode development",
  "lint": "vue-cli-service lint"
},

压包命令

测试环境压包

npm run build:dev

vue-cli-service build --mode development
通过传递 --mode 选项参数为命令行覆写默认的模式。
这里用development的模式覆写build默认使用的production模式。

生产环境压包

npm run build

或者

npm run build:prod

更多环境压包

这里假设我们还有另外一个环境prodev需要压包，这时候我们需要添加对应的命令，并添加对应的配置。

添加配置文件

在根目录添加一个配置文件.env.prodev。

.env.prodev

NODE_ENV=production
VUE_APP_API_URL_WEB=https://testa-prodev.com
VUE_APP_API_URL_APP=https://testb-prodev.com

注意这里如果不添加NODE_ENV=production，那最终打包时NODE_ENV值为development。

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
+ "build:prod": "vue-cli-service build --mode production",
+ "build:dev": "vue-cli-service build --mode development",
+ "build:prodev": "vue-cli-service build --mode prodev",
  "lint": "vue-cli-service lint"
},

压包

npm run build:prodev

总结

vue-cli 3.0的不同环境压包设置现在是真的非常方便了。 还有其他的配置自由度都非常高，有待更多的探索。