這篇文章主要介紹了vue-cli3多環境打包配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧
最近下載了vue-cli3,研究了下vue-cli3下多環境的配置。
首先，安裝vue-cli3。
npm install -g @vue/cli
安裝好之後的項目是這樣的，見下圖：
相比較vue-cli2的項目，缺少了build和config目錄，另外static目錄也沒了，多了個public目錄。
配置文件需要自己寫一個vue.config.js,可以參考官方文檔文檔寫，網址
https://cli.vuejs.org/zh/config/
現在說重點，怎麼配置多環境。打開package.json文件，見下圖：
在scripts裏面修改環境配置，可以根據自己的項目來修改對應的環境，見下圖：
修改完之後在項目根目錄創建對應的文件，文件名以.env開頭後面跟上.name,例如：.env.fat
在.env.fat裏寫上自己想寫的配置，見下圖：
注意：需要以VUE-APP_開頭，後面的名字可以隨意。我這裏設置了一個VUE_APP_APP_HOST 來存儲對應的服務器API地址。
最後，執行npm run fat 即可將.env.fat 文件裏的配置帶入到項目中，在Vue項目中可以使用process.env.Vue_APP_APP_HOST 來使用.env.fat 裏設置的Vue_APP_APP_HOST，其他以Vue_APP_開頭的設置也可以讀取到。
以上所述是小編給大家介紹的vue-cli3多環境打包配置詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！