詳解vue-cli3多環(huán)境打包配置
最近下載了vue-cli3,研究了下vue-cli3下多環(huán)境的配置。
首先，安裝vue-cli3。
npm install -g @vue/cli
安裝好之后的項目是這樣的，見下圖：
相比較vue-cli2的項目，缺少了build和config目錄，另外static目錄也沒了，多了個public目錄。
配置文件需要自己寫一個vue.config.js,可以參考官方文檔文檔寫，網址
https://cli.vuejs.org/zh/config/
現在說重點，怎么配置多環(huán)境。打開package.json文件，見下圖：
在scripts里面修改環(huán)境配置，可以根據自己的項目來修改對應的環(huán)境，見下圖：
修改完之后在項目根目錄創(chuàng)建對應的文件，文件名以.env開頭后面跟上.name,例如：.env.fat
在.env.fat里寫上自己想寫的配置，見下圖：
注意：需要以VUE-APP_開頭，后面的名字可以隨意。我這里設置了一個VUE_APP_APP_HOST 來存儲對應的服務器API地址。
最后，執(zhí)行npm run fat 即可將.env.fat 文件里的配置帶入到項目中，在Vue項目中可以使用process.env.Vue_APP_APP_HOST 來使用.env.fat 里設置的Vue_APP_APP_HOST，其他以Vue_APP_開頭的設置也可以讀取到。
以上所述是小編給大家介紹的vue-cli3多環(huán)境打包配置詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了Vue如何清空對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關于Vue v2.4中新增的$attrs及$listeners屬性的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要為大家介紹了Vue實現帶參數的自定義指令示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
當創(chuàng)建的tab標簽超出頁面可視區(qū)域時自動滾動一個tab標簽距離，并可手動點擊滾動tab標簽，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
營運三寶(九宮格、大轉盤、老虎機，當然此三寶當然是最基礎的營銷運營手段)，本片文章聊聊大轉盤，轉盤的實現邏輯應該是營銷方案較為簡單的一種了，本文將介紹如何實現大轉盤抽獎，感興趣的朋友可以參考下2021-05-05
uniapp開發(fā)小程序的過程中主、分包有大小限制,隨著業(yè)務的增加,使用web-view加載H5的方式,往往純加載并不能滿足業(yè)務需求,這個時候就得了解小程序與H5的交互,這篇文章主要給大家介紹了關于微信小程序與webviewH5通信的踩坑記錄,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了深入淺出vue圖片路徑的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue中定義的data為什么是函數,vue中已經幫我們控制臺輸出警告，并且不會讓組件中的data合并到options中去，那么，很友好的處理了開發(fā)者的強行將data寫成對象的可能性，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中的$root和$parent ，本文通過文字實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04