前言
vue-cli的打包??模式有3種： development偏竟、test、production敞峭，其中development和test使用的是未優(yōu)化的打包方式踊谋，于是問(wèn)題出現(xiàn)了：
問(wèn)題
如果我需要 把項(xiàng)目部署到測(cè)試環(huán)境，如果使用npm build --mode test旋讹，則打包出來(lái)的代碼沒(méi)有進(jìn)行優(yōu)化殖蚕，導(dǎo)致測(cè)試服訪問(wèn)網(wǎng)頁(yè)變卡轿衔，如果用production模式，就很難區(qū)分測(cè)試服和線上的環(huán)境了睦疫，那么測(cè)試服如何能兼顧打包優(yōu)化和配置的正確性呢害驹？
原因和思路
個(gè)人猜測(cè)：vue-cli設(shè)置test模式，目的是針對(duì)單元測(cè)試提供的環(huán)境蛤育，而不是我們認(rèn)為的預(yù)發(fā)布環(huán)境宛官。
為了能在測(cè)試服構(gòu)建優(yōu)化后的代碼，思路有2種：
1.針對(duì)test/develop模式的webpack配置進(jìn)行優(yōu)化
具體操作
我們把vue-cli內(nèi)建的webpack配置（優(yōu)化模式和非優(yōu)化模式）打印出來(lái)缨伊。使用如下命令：
echo "module.exports = $(vue inspect --mode production)" > cfg.prod.js
echo "module.exports = $(vue inspect --mode test)" > cfg.test.js
這樣就會(huì)在你項(xiàng)目根目錄下產(chǎn)生cfg.prod.js和cfg.test.js2個(gè)文件
比對(duì)2者配置摘刑，可以清楚地看到：生產(chǎn)模式的打包增加了minimizer、splitChunks等代碼拆分/壓縮優(yōu)化配置
分析以后刻坊，把prod的配置寫入到vue.config.js中即可
2.另一種更簡(jiǎn)單的方式
測(cè)試環(huán)境同樣使用production模式枷恕，再通過(guò)配置文件把原本屬于線上的配置覆蓋成測(cè)試服的
具體操作
假設(shè)我測(cè)試環(huán)境api地址是api-test.foo.com，線上環(huán)境為api.foo.com
在項(xiàng)目根目錄下創(chuàng)建名為
.env.test文件在該文件中寫入NODE_ENV和測(cè)試環(huán)境需要的配置：
NODE_ENV=production
VUE_APP_TEST=1
VUE_APP_API=api-test.foo.com
注意：變量必須以VUE_APP_開(kāi)頭
- 在項(xiàng)目中引用時(shí)谭胚，判斷是否為測(cè)試服環(huán)境徐块，如果是就把a(bǔ)pi地址覆蓋成測(cè)試服的
let api = 'api.foo.com'
if (process.env.VUE_APP_TEST) {
api = process.env.VUE_APP_API; // api-test.foo.com
}
如此一來(lái)測(cè)試服環(huán)境既能使用優(yōu)化后的代碼，又能使用測(cè)試服的地址
參考: https://cli.vuejs.org/zh/guide/mode-and-env.html
