Vue配置環(huán)境變量的正確打開方式
第一 配置package.json
package.json 里的 scripts 配置 serve test build，通過 --mode xxx 來執(zhí)行不同環(huán)境 通過 npm run serve 啟動(dòng)本地 , 執(zhí)行 development 通過 npm run test 打包測試 , 執(zhí)行 testing 通過 npm run build 打包正式 , 執(zhí)行 production
"scripts": {
"serve": "vue-cli-service serve --open",
"test": "vue-cli-service build --mode testing",
"build": "vue-cli-service build",
}第二 配置介紹 簡單說明 看詳情點(diǎn)擊上面tps
以 VUE_APP_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。
比如,VUE_APP_MY_NAME = '活在風(fēng)浪' 通過process.env.VUE_APP_MY_NAME 訪問。
除了 VUE_APP_xxx 變量之外，在你的應(yīng)用代碼中始終存在兩個(gè)默認(rèn)變量NODE_ENV 和BASE_URL
第三 在根目錄新建文件
- .env.development 本地開發(fā)環(huán)境配置
- 內(nèi)容如下
NODE_ENV='development'
- .env.staging 測試環(huán)境配置
NODE_ENV='production'
- .env.production 正式環(huán)境配置
NODE_ENV='production'
第四
文件已建立完畢,下一步該封裝baseURL了,如果你封裝了axios,在你的axios父文件夾中在新建一個(gè)baseURL.js里面寫的是判斷環(huán)境的代碼
let baseURL = "";
if (process.env.NODE_ENV == "development") {
// 開發(fā)環(huán)境 因?yàn)槲疫@里寫了配置跨域的重定路徑所以是api
baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
// 正式環(huán)境
baseURL = "https://www.baidu.com";
} else {
// 測試環(huán)境
baseURL = "https://www.ceshi.com";
}
export default baseURL;
第五
導(dǎo)出baseURL 在封裝axsio的地方導(dǎo)入baseURL 將公共地址換成 baseURL變量 (baseURL變量就是寫的環(huán)境判斷)
使用不同的命令 請求的網(wǎng)址就不一樣 如
//啟動(dòng)本地服務(wù)器 npm run serve //啟動(dòng)打包命令 npm run build //啟動(dòng)測試環(huán)境命令 npm run test
說一個(gè)細(xì)節(jié):如果運(yùn)行打包命令,dist中index.html直接打開是相對電腦盤符的
要使用一個(gè)插件 直接在vsc插件管理下載
總結(jié):
先配置package.json 在新建需要文件 然后寫判斷環(huán)境代碼
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue 3 + Element Plus樹形表格全選多選及子節(jié)點(diǎn)勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點(diǎn)勾選和父節(jié)點(diǎn)勾選等常見問題,通過逐步實(shí)現(xiàn)這些功能,您可以構(gòu)建功能強(qiáng)大且用戶友好的樹形表格組件,以滿足各種數(shù)據(jù)展示需求,對Vue 3 Element Plus樹形表格相關(guān)知識感興趣的朋友一起看看吧2023-12-12
elmentui是一款為vue設(shè)計(jì)的桌面組件庫,下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue-pdf實(shí)現(xiàn)pdf在線預(yù)覽并實(shí)現(xiàn)自定義預(yù)覽框高度
這篇文章主要介紹了vue-pdf實(shí)現(xiàn)pdf在線預(yù)覽并實(shí)現(xiàn)自定義預(yù)覽框高度方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vuex5中的Pinia插件機(jī)制，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
echarts3如何清空上一次加載的series數(shù)據(jù)
這篇文章主要介紹了echarts3如何清空上一次加載的series數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
在vue項(xiàng)目中我們常常需要用到computed和watch，那么我們究竟在什么場景下使用computed和watch呢？他們之間又有什么區(qū)別呢？本將給大家詳細(xì)的介紹一下,需要的朋友可以參考下2023-05-05
Vue之el-select結(jié)合v-if動(dòng)態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結(jié)合v-if動(dòng)態(tài)控制template顯示隱藏方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)
這篇文章主要介紹了詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了Vue實(shí)現(xiàn)自帶的過濾器，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03