? ???一、多環(huán)境公用一個包即可
????????我們的項目一般都是有生產(chǎn)環(huán)境和測試環(huán)境，這兩個環(huán)境一般只有域名和端口號不同撞叨，其他都一樣枷餐，在這種情況下怨咪，我們是不需要做多環(huán)境配置的趁桃。在我們的代碼中baseURL可以直接寫斜杠即可（/），不用配置環(huán)境變量，如下代碼：
const request = axios.create({
? baseURL:'/',
? timeout: 10000,
})
這樣打包（yarn run build）產(chǎn)生的dist文件夾測試環(huán)境上和生產(chǎn)環(huán)境上可以用同一個包。
? ??二冗锁、多環(huán)境多個包叨叙，多個環(huán)境配置
????????當(dāng)我們的項目測試環(huán)境和生產(chǎn)環(huán)境除了域名和端口號不同之外樱蛤，還有其他的不同時，需要做環(huán)境變量的配置形用。例如：
? ? ? ? 測試環(huán)境登錄請求地址：http://test-data.xx.com/apitest/data-service/system/login
? ? ? ? 生產(chǎn)環(huán)境登錄請求地址：http://data.xx.com/api/data-service/system/login
這種情況解愤，怎么辦呢？
?????1.錯誤嘗試
????????我曾嘗試過直接修改baseURL（有點傻~~），如下代碼：
const request = axios.create({
?baseURL:process.env.NODE_ENV ==='development'?'/apitest':'/api',
? timeout: 10000,
})
結(jié)果發(fā)現(xiàn)執(zhí)行 yarn run serve 時走的是development，插入的前綴是apitest，執(zhí)行yarn run build 時走的是production，插入的前綴都是api，并沒有區(qū)分開測試環(huán)境和生產(chǎn)環(huán)境烁焙，只是和開發(fā)環(huán)境區(qū)分開了九火。所以以上嘗試失敗是掰。最后突然想起了環(huán)境變量的配置。
? ? 2.解決方法-配置環(huán)境變量
? ???我們發(fā)現(xiàn)vue-cli 提供了三個模式(test昨忆、development拢驾、production)而每種NODE_ENV下面可以配置多個環(huán)境變量寥裂。
????我們可以通過.env文件增加后綴來設(shè)置某個模式下特有的環(huán)境變量????
????我們可以通過傳遞 --mode選項參數(shù)為命令覆寫默認(rèn)的模式诺舔，使用自己的環(huán)境變量
? ? （1）首先在項目目錄下創(chuàng)建不同的.env文件，目前我們討論 開發(fā)環(huán)境 dev,測試環(huán)境test,發(fā)布環(huán)境 prod，所以我們創(chuàng)建如下三個文件(.env.production、.env.test、.env.development)荔烧，如下圖所示
三個文件中的具體配置如下：
? ? ? ?需要注意：測試環(huán)境的NODE_ENV是production
如果需要其他環(huán)境 按照以上描述 創(chuàng)建 .env.[model]文件
? ? （2）完成上面環(huán)境配置之后改寫 package.json文件
?這里 需要注意的 是 --model 后面的參數(shù) 需要是 .env.[model] 文件 對應(yīng)的 [model]?
例如 .env.test 文件 那么? 這里就是 --mode test
????????.env.prod 文件 那么 這里就是 --mode prod.
? ? （3） 本地服務(wù) 代理的配置 如下圖
? ? （4）api請求方法中的路徑抒钱，如下圖
結(jié)束語：如果還是接口不通，有可能和后臺nginx配置有關(guān)系，需要請教后臺開發(fā)人員啦。
