在vue的項目開發中，往往代碼要在本地開發環境、測試環境、預發環境、生產環境等各種環境下執行，各個環境所對應的api接口地址也是不同的，如果每次打包都手動的修改接口地址，是很低效的，也是很容易出錯的，如果在打包的時候忘記修改接口地址，后果也是很嚴重的。
寫一個配置文件，可以根據環境的不同，自動切換接口地址是很有必要的。
在號稱零配置的vue-cli3中，該如何配置呢？
在vue-cli3的項目中，
npm run serve時會把process.env.NODE_ENV設置為‘development’；
npm run build 時會把process.env.NODE_ENV設置為‘production’；
根據process.env.NODE_ENV設置不同請求url就可以區分出本地和線上環境。
但是，凡事最怕但是，但是實際開發過程中涉及到的環境可能不止這兩種，還可能會有測試環境，預發環境和生產環境等等。
同樣是執行npm run build，怎么手動更改process.env.NODE_ENV？
具體步驟如下： (以預發環境為例)
** package.json**的scripts中添加
"pre": "vue-cli-service build --mode pre"在項目根目錄添加文件“.env.pre”，其內容：
NODE_ENV = 'pre'
是的，只寫這一句就行了！
(命令中用到的mode，文章最后會講到)
這樣，npm run pre即打預發環境包，npm run build則打生產包
這主要得益于在 vue-cli 3.0.x 里面支持 “.env” 文件配置
通過改變process.env.NODE_ENV值區分打包環境，但是webpack打包時針對process.env.NODE_ENV===‘production’和其他情況打出來的包結構和大小都不一樣；
怎么消除這種差異？
思路：原來是根據process.env.NODE_ENV的值來區分，能不能換個值作區分？
可以使用其他變量比如process.env.VUE_APP_TITLE來區分環境
與上面不同的是，.env.pre文件中的內容做一下修改：
NODE_ENV = 'production'
VUE_APP_TITLE = 'pre'
注意：NODE_ENV改成了production，將VUE_APP_TITLE的值置為了pre（只有VUE_APP_開頭的環境變量可以在項目代碼中直接使用）
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中(即在項目代碼中使用)。你可以在應用的代碼中這樣訪問它們：
模式概念:
模式是 Vue CLI 項目中一個重要的概念。一般情況下 Vue CLI 項目有三個默認模式：
development模式用于vue-cli-service serve
production模式用于vue-cli-service build 和 vue-cli-service test:e2e
test模式用于vue-cli-service test:unit
模式不等同于 NODE_ENV，一個模式可以包含多個環境變量。也就是說，每個模式都將 NODE_ENV的值設置為模式的名稱(可重新賦值更改)——比如在 development 模式下 NODE_ENV 的值會被設置為 “development”。
你可以通過為 .env 文件增加后綴來設置某個模式下特有的環境變量。比如，如果你在項目根目錄創建一個名為 .env.development 的文件，那么在這個文件里聲明過的變量就只會在 development 模式下被載入。
你可以通過傳遞 --mode 選項參數為命令行覆寫默認的模式。例如，如果你想要在構建命令中使用開發環境變量，請在你的 package.json 腳本中加入：
"dev-build": "vue-cli-service build --mode development",
在項目根路徑創建.env.test文件，內容為
NODE_ENV='production' //表明這是生產環境(需要打包)
VUE_APP_CURRENTMODE='test' // 表明生產環境模式信息
VUE_APP_BASEURL='http://***.****.com:8000' // 測試服務器地址
修改項目中的api接口文件
在我的項目中,一般會創建一個api.js 來管理所有的接口url
因為我們在本地開發環境中是通過代理來連接服務器的,所以將url寫成這
在文件開頭通過環境變量改變baseUrl
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
baseUrl = ""
} else if (process.env.NODE_ENV == 'production') {
baseUrl = process.env.VUE_APP_BASEURL
} else {
baseUrl = ""
}
