詳解vue-cli3多環(huán)境打包配置
最近下載了vue-cli3,研究了下vue-cli3下多環(huán)境的配置。
首先，安裝vue-cli3。
npm install -g @vue/cli
安裝好之后的項(xiàng)目是這樣的，見下圖：
相比較vue-cli2的項(xiàng)目，缺少了build和config目錄，另外static目錄也沒了，多了個(gè)public目錄。
配置文件需要自己寫一個(gè)vue.config.js,可以參考官方文檔文檔寫，網(wǎng)址
https://cli.vuejs.org/zh/config/
現(xiàn)在說重點(diǎn)，怎么配置多環(huán)境。打開package.json文件，見下圖：
在scripts里面修改環(huán)境配置，可以根據(jù)自己的項(xiàng)目來修改對(duì)應(yīng)的環(huán)境，見下圖：
修改完之后在項(xiàng)目根目錄創(chuàng)建對(duì)應(yīng)的文件，文件名以.env開頭后面跟上.name,例如：.env.fat
在.env.fat里寫上自己想寫的配置，見下圖：
注意：需要以VUE-APP_開頭，后面的名字可以隨意。我這里設(shè)置了一個(gè)VUE_APP_APP_HOST 來存儲(chǔ)對(duì)應(yīng)的服務(wù)器API地址。
最后，執(zhí)行npm run fat 即可將.env.fat 文件里的配置帶入到項(xiàng)目中，在Vue項(xiàng)目中可以使用process.env.Vue_APP_APP_HOST 來使用.env.fat 里設(shè)置的Vue_APP_APP_HOST，其他以Vue_APP_開頭的設(shè)置也可以讀取到。
以上所述是小編給大家介紹的vue-cli3多環(huán)境打包配置詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）
這篇文章主要介紹了VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-04-04
vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法
今天小編就為大家分享一篇vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決vue js IOS H5focus無法自動(dòng)彈出鍵盤的問題
今天小編就為大家分享一篇解決vue js IOS H5focus無法自動(dòng)彈出鍵盤的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
今天小編就為大家分享一篇vue 更改連接后臺(tái)的api示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-11-11
詳解Vue內(nèi)部怎樣處理props選項(xiàng)的多種寫法
這篇文章主要介紹了詳解Vue內(nèi)部怎樣處理props選項(xiàng)的多種寫法，詳細(xì)的介紹了props的使用的寫法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue類名如何獲取動(dòng)態(tài)生成的元素，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)選項(xiàng)卡切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動(dòng)添加前綴
這篇文章主要介紹了vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動(dòng)添加前綴方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10