vue環(huán)境變量配置之process.env解讀
vue環(huán)境變量配置process.env
在用vue框架時(shí)，經(jīng)常用到兩種環(huán)境，一種是開(kāi)發(fā)環(huán)境，就是本地開(kāi)發(fā)時(shí)的環(huán)境，一種是生產(chǎn)環(huán)境，就是要發(fā)布到線上的環(huán)境。
平時(shí)開(kāi)發(fā)是用生產(chǎn)環(huán)境的，如果發(fā)布到線上時(shí)，需要切換環(huán)境為線上。如果人為去切換也是可以的，但是會(huì)容易忘記，可以通過(guò)配置不同的運(yùn)行命令來(lái)自動(dòng)切換環(huán)境。
下面開(kāi)始：
配置環(huán)境的實(shí)現(xiàn)原理
實(shí)現(xiàn)原理就是采用node.js頂層對(duì)象中的process.env（進(jìn)程環(huán)境，返回一個(gè)包含用戶(hù)環(huán)境信息的對(duì)象）屬性，根據(jù)各個(gè)環(huán)境的配置文件區(qū)分和切換環(huán)境
具體實(shí)例
1. 安裝依賴(lài)
npm install process
2.創(chuàng)建.env.dev 和.env.prod兩個(gè)文件
注意文件要?jiǎng)?chuàng)建在根目錄下面
.env.dev文件內(nèi)容如下：
NODE_ENV = 'development' VUE_APP_TITLE = 'development' /* 請(qǐng)求接口地址 */ VUE_APP_INTERFACE_URL="https://xxx" /* proxy代理地址 */ VUE_APP_PROXYURL='http://xxx'
.env.prod文件內(nèi)容如下：
NODE_ENV='production' VUE_APP_TITLE='prod' /* 請(qǐng)求接口地址 */ VUE_APP_INTERFACE="https://xxx"
3.設(shè)置項(xiàng)目啟動(dòng)時(shí)默認(rèn)的環(huán)境
只需要在項(xiàng)目啟動(dòng)命令后面修改需要的環(huán)境就行了，例如npm run dev，把--mode dev改為--mode prod就變成了開(kāi)發(fā)環(huán)境
package.json部分內(nèi)容如下：
"scripts":{
?? ?"dev":"vue-cli-service serve --mode dev",
?? ?"prod":"vue-cli-service serve --mode prod"
}4.查看環(huán)境是否配置成功
在main.js文件中打印當(dāng)前環(huán)境，輸出就成功了
console.log(process.env.NODE_ENV)
vue3 process.env.XXX環(huán)境變量不生效
問(wèn)題
使用process.env.XXX時(shí)獲取不到環(huán)境變量的值：
axios.defaults.baseURL = process.env.VUE_APP_BASE_API;
解決
項(xiàng)目根目錄下的.env.development和.env.production環(huán)境配置文件中，NODE_ENV=development的值必須和package.json文件啟動(dòng)配置--mode一致
//.env.development NODE_ENV=development VUE_APP_BASE_API=/api VUE_APP_BASE_URL=http://localhost:8081/ VUE_APP_PROXYURL=http://localhost:8080/
"scripts": {
? ? ? ? "serve": "vue-cli-service serve",
? ? ? ? "dev": "vue-cli-service serve --mode development",
? ? ? ? "prod": "vue-cli-service serve --mode production",
? ? },.env.development和.env.production環(huán)境配置文件中變量名必須以VUE_APP_開(kāi)頭
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
手把手教學(xué)vue的路由權(quán)限問(wèn)題
這篇文章主要介紹了手把手教學(xué)vue的路由權(quán)限問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue3+vite相對(duì)路徑的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server err
前端使用axios 訪問(wèn)后端接口時(shí)報(bào)錯(cuò),在瀏覽器中點(diǎn)擊紅色的報(bào)錯(cuò)數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案
這篇文章主要介紹了vue修改數(shù)據(jù)頁(yè)面無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例
這篇文章主要介紹了sortable+element 實(shí)現(xiàn)表格行拖拽的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
這篇文章主要介紹了詳細(xì)解讀VUE父子組件的使用,今天來(lái)講一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達(dá)到一些效果，下面與你們分享一下2023-05-05
基于Vue2實(shí)現(xiàn)簡(jiǎn)易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件效果
這是一個(gè)基于Vue2的簡(jiǎn)易省市區(qū)縣三級(jí)聯(lián)動(dòng)組件，可以控制只顯示省級(jí)或只顯示省市兩級(jí)，可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱(chēng)數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue中的.vue文件的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了原生echart和vue-echart的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02