最近下載了vue-cli3,研究了下vue-cli3下多環(huán)境的配置。

首先，安裝vue-cli3。

npm install -g @vue/cli

安裝好之后的項目是這樣的，見下圖：

相比較vue-cli2的項目，缺少了build和config目錄，另外static目錄也沒了，多了個public目錄。

配置文件需要自己寫一個vue.config.js,可以參考官方文檔文檔寫，網(wǎng)址

https://cli.vuejs.org/zh/config/

現(xiàn)在說重點，怎么配置多環(huán)境。打開package.json文件，見下圖：

在scripts里面修改環(huán)境配置，可以根據(jù)自己的項目來修改對應(yīng)的環(huán)境，見下圖：

修改完之后在項目根目錄創(chuàng)建對應(yīng)的文件，文件名以.env開頭后面跟上.name,例如：.env.fat

在.env.fat里寫上自己想寫的配置，見下圖：

注意：需要以VUE-APP_開頭，后面的名字可以隨意。我這里設(shè)置了一個VUE_APP_APP_HOST 來存儲對應(yīng)的服務(wù)器API地址。

最后，執(zhí)行npm run fat 即可將.env.fat 文件里的配置帶入到項目中，在Vue項目中可以使用process.env.Vue_APP_APP_HOST 來使用.env.fat 里設(shè)置的Vue_APP_APP_HOST，其他以Vue_APP_開頭的設(shè)置也可以讀取到。

以上所述是小編給大家介紹的vue-cli3多環(huán)境打包配置詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！