vue-cli3.0 多环境配置及打包压缩

1. 问题

vue-cli升级到3.0后 webpack配置不再像2.0一样可以在build文件下进行多环境配置。所以如果想配置多个环境变量，我们只能使用 新建.env文件 具体网址。但是新建后我们使用打包命令，打包后的文件都是未压缩的，会造成打包文件过大的问题。

2. 实例代码

1. package.json

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"devop": "vue-cli-service build --mode devop",
"prod": "vue-cli-service build --mode prod",
"stage": "vue-cli-service build --mode stage",
"test": "vue-cli-service build --mode test"

2. 同级文件夹下新建 .env文件

   
   image.png

3. 以 .env.devop文件为例

NODE_ENV = 'production'
VUE_APP_BASEURL = 'devop'

注意：
.env 文件不能书写注释，
NODE_ENV 指定的是打包方式，
VUE_APP_BASEURL 为自己定义的环境变量网址（不同环境的接口地址)

官网说明配置环境变量网址

3. github 上 issue

此问题 github 上已有解决方案
https://github.com/vuejs/vue-cli/issues/3739