關於vue-cli項目配置多環境
基於vue-cli搭建的項目環境，一般來說默認只有開發環境和生產環境，但實際工作中，還需要一個線上測試環境。第一次配置的時候找了很多資源，但大多都沒有特別詳細。今天整理一個算是很詳細的配置多環境步驟，希望可以幫助到有需要的人～
搭建測試環境
- 在 config文件夾 里，新建一個pre.env.js（自定義名字）這里也可以直接復制一份dev.env.js，自行修改里面的名稱
'use strict'
module.exports = {
NODE_ENV: '"pre"' // 自定義名字
- 在package.json 中 script 標簽里加上一句
"build:pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js"
這里的意思是，當執行npm run build:pre時，執行config文件里面pre的文件
直接這樣做是會報錯的，還要安裝cross-env這個包 使用 npm install --save cross-env
在使用vue-cli時，npm run build 是被默認寫成執行pro(生產環境)的，因此，執行以上代碼，並沒有正確運行測試環境。 在build文件夾里，webpack.prod.conf.js文件：
可見原來的env是引入的prod.env:
// const env = require('../config/prod.env')
修改為： const env = require ('../config/' + process.env.env_config + '.env')
自己可以打印一下 這時process.env.env_config 所指向的時npm run build：傳的值
這時正確使用npm run build:pre 是可以打包成功的， 但是由於將原本固定的prod.env修改為了動態的， 所以在執行npm run build 會報錯 因為在package.json中 原有的script中build寫的執行文件直接是build.js,指向的是原來寫死的prod.env.js文件。 需要修改biuld：
"cross-env NODE_ENV=production env_config=prod node build/build.js"
跟build:pre不同的是 node_env需要指向config中的文件名稱，與之對應的是env_config的名字。 這樣便可以打包成功了。 build.js中有一段描述： const spinner = ora('building for prod....') 可以動態修改為： const spinner = ora('building for ' + process.env.env_config)