快捷導(dǎo)航

Vue配置環(huán)境變量的正確打開方式

更新時間：2022年01月07日 15:22:25 作者：0.活在風(fēng)浪里

這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

第一配置package.json

package.json 里的 scripts 配置 serve test build，通過 --mode xxx 來執(zhí)行不同環(huán)境
通過 npm run serve 啟動本地 , 執(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",
}

第二配置介紹簡單說明看詳情點擊上面tps

以 VUE_APP_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。

比如,VUE_APP_MY_NAME = '活在風(fēng)浪' 通過process.env.VUE_APP_MY_NAME 訪問。

除了 VUE_APP_xxx 變量之外，在你的應(yīng)用代碼中始終存在兩個默認變量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父文件夾中在新建一個baseURL.js里面寫的是判斷環(huán)境的代碼

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 開發(fā)環(huá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)址就不一樣如

//啟動本地服務(wù)器
npm run serve
//啟動打包命令
npm run build
//啟動測試環(huán)境命令
npm run test

說一個細節(jié):如果運行打包命令,dist中index.html直接打開是相對電腦盤符的

要使用一個插件直接在vsc插件管理下載

總結(jié):

先配置package.json 在新建需要文件然后寫判斷環(huán)境代碼

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

Vue 3 + Element Plus樹形表格全選多選及子節(jié)點勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點勾選和父節(jié)點勾選等常見問題,通過逐步實現(xiàn)這些功能,您可以構(gòu)建功能強大且用戶友好的樹形表格組件,以滿足各種數(shù)據(jù)展示需求,對Vue 3 Element Plus樹形表格相關(guān)知識感興趣的朋友一起看看吧
2023-12-12
解決vue3使用element-ui的具體操作
elmentui是一款為vue設(shè)計的桌面組件庫,下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-08-08
vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度
這篇文章主要介紹了vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vuex5中的Pinia插件機制
這篇文章主要介紹了vuex5中的Pinia插件機制，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
echarts3如何清空上一次加載的series數(shù)據(jù)
這篇文章主要介紹了echarts3如何清空上一次加載的series數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue中computed和watch的區(qū)別
在vue項目中我們常常需要用到computed和watch，那么我們究竟在什么場景下使用computed和watch呢？他們之間又有什么區(qū)別呢？本將給大家詳細的介紹一下,需要的朋友可以參考下
2023-05-05
Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue返回首頁后如何清空路由問題
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
詳解Vue+axios+Node+express實現(xiàn)文件上傳(用戶頭像上傳)
這篇文章主要介紹了詳解Vue+axios+Node+express實現(xiàn)文件上傳(用戶頭像上傳)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue實現(xiàn)自帶的過濾器實例
本篇文章主要介紹了Vue實現(xiàn)自帶的過濾器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03