vue-cli-service build 如何环境设置，打出不同环境的包

使用 vue-cli-service 打包项目，通过配置不同的指令，给项目设置不同的配置，达到使用指令打出不一样的包，避免来回切换环境配置信息。

运行 npm run serve 时，会把 process.env.NODE_ENV 设置为 'development';

运行 npm run build 时，会把 process.env.NODE_ENV 设置为 'production';

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
},

如果只是区分线上环境还是本地环境的配置，使用 process.env.NODE_ENV 就可以区分出来，但是如果将打包的项目，需要区分测试环境和生产环境时，我们又该如何区分呢？

在 Vue CLI 官网中，vue-cli-service serve 中可以配置选项 --mode 来指定环境模式，默认为 development。vue-cli-service build 中可以配置选项 --mode 来指定环境模式，默认为 production。

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里，那么我们可以给 build 下添加选项 --mode 来区分测试环境和生产环境。

更多参数配置，请查看 Vue cli 服务。

在 package.json 文件中，添加测试环境和生产环境的打包指令：

"scripts": {
  "build-test": "vue-cli-service build --mode test",
  "build-prod": "vue-cli-service build --mode prod",
},

那如何通过指令来配置环境变量呢？

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

注意：环境文件只包含环境变量的“键=值”对。

环境加载属性：为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写，因此通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。

在项目根目录下添加两个文件 .env.test 和 .env.prod，配置如下：

// .env.test
NODE_ENV = 'production'
VUE_APP_WEBSOCKET_URL = 'wss://172.16.105.53:8080/'

// .env.prod
NODE_ENV = 'production'
VUE_APP_WEBSOCKET_URL = 'wss://xcx.upal.cn/'

这里需要注意的是：只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

更多信息，请查看 环境变量与模式的配置 。

如何在项目中使用呢？ 

const baseurl = process.env.VUE_APP_WEBSOCKET_URL || 'ws://172.16.105.53:8080/'

然后使用不同的指令就可以生产不同的包了。