vue-cli3分环境本地运行和打包

cli3相比cli2简洁了许多，配置相关信息需要自己手动创建文件。

最终实现的配置命令：
npm run build 线上环境打包
npm run test 测试环境打包
npm run serve 测试环境本地运行
npm run online 线上环境本地运行

---

（一）、分环境打包

npm run test
npm run build

1、项目根目录创建文件 .env.buid 和 .env.test

.env.buid 文件

/* 注意：
* 除了特殊变量NODE_ENV 和 BASE_URL外，
* 只有VUE_APP_ 开头的变量才会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
*/
NODE_ENV='production'
VUE_APP_TITLE = 'production'
// 正式环境请求地址
// VUE_APP_shareUrl = '"https://on.xxxa.com"'
// VUE_APP_baseUrl = '"https://on.xxxb.com"'
// VUE_APP_javaUrl = '"https://on.xxxb.com"'

.env.test 文件

NODE_ENV='production'
VUE_APP_TITLE = 'test'

特别注意：如果误把此处的NODE_ENV='production'写成了NODE_ENV='test'，会出现一个特别坑的问题。在ios系统11和vivo x9手机上会出现页面白屏的问题，且无报错。
这个问题我找了好久，各种检查代码，各种es6转es5尝试都不行。坑死我了！！！

2、修改package.json

"scripts": {
    "build": "vue-cli-service build --mode build", // 当前模式build
    "test": "vue-cli-service build --mode test", // 当前模式test
    ...
  },

---

（二）、分环境运行

npm run serve
npm run online

1、项目根目录创建文件 .env.dev 和 .env.online

.env.dev 文件

NODE_ENV='development'
VUE_APP_TITLE = 'dev'

.env.online 文件

NODE_ENV='development'
VUE_APP_TITLE = 'online'

2、修改package.json

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "online": "vue-cli-service serve --mode online",
    ...
  },

请求地址可以直接定义在.env.xxx文件里，然后调用。
但要注意除了特殊变量NODE_ENV 和 BASE_URL外，只有VUE_APP_ 开头的变量会被webpack.DefinePlugin 静态嵌入到客户端侧的包中。

// 调用方式
const shareUrl = process.env.VUE_APP_shareUrl
const baseUrl = process.env.VUE_APP_baseUrl
const javaUrl = process.env.VUE_APP_javaUrl

也可以通过判断process.env.VUE_APP_TITLE来定义不同的请求地址：

switch(process.env.VUE_APP_TITLE) {
  // 线上环境
  case 'production':
  case 'online':
    shareUrl = 'https://on.xxxa.com'
    baseUrl = 'https://on.xxxb.com' 
    javaUrl = 'https://on.xxxc.com'
    break
  // 测试环境
  default:
    shareUrl = 'https://cs.xxxa.com'
    baseUrl= 'https://cs.xxxb.com' 
    javaUrl = 'https://cs.xxxc.com' 
    break
}