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è)包含用戶環(huán)境信息的對(duì)象）屬性，根據(jù)各個(gè)環(huán)境的配置文件區(qū)分和切換環(huán)境
具體實(shí)例
1. 安裝依賴
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)文章
Element樹(shù)形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能
最近做的項(xiàng)目用到了全選全不選功能,于是就自己動(dòng)手寫(xiě)了一個(gè),這篇文章主要給大家介紹了關(guān)于Element樹(shù)形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue組件傳值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
super-vuex是一套用于簡(jiǎn)化Vuex的數(shù)據(jù)架構(gòu)。這篇文章主要介紹了淺談super-vuex使用體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了淺談Vue 性能優(yōu)化之深挖數(shù)組，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
easycom模式開(kāi)發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧
uni-app基于VUE開(kāi)發(fā)，通常組件的使用都是先安裝，然后全局或者局部引入，注冊(cè)，今天通過(guò)本文給大家分享easycom模式開(kāi)發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧，需要的朋友一起看看吧2021-08-08
vue-router嵌套路由方式(頁(yè)面路徑跳轉(zhuǎn)但頁(yè)面顯示空白)
這篇文章主要介紹了vue-router嵌套路由方式(頁(yè)面路徑跳轉(zhuǎn)但頁(yè)面顯示空白)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng)(推薦)
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)網(wǎng)頁(yè)版?zhèn)€人簡(jiǎn)歷系統(tǒng),需要的朋友可以參考下2019-12-12
Vue2使用cube-ui?實(shí)現(xiàn)搜索過(guò)濾、高亮功能
cube-ui?是基于?Vue.js?實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)，由于很長(zhǎng)一段時(shí)間沒(méi)有學(xué)習(xí)cube-ui?的功能實(shí)現(xiàn)示例代碼了，今天通過(guò)本文給大家介紹下Vue2使用cube-ui?實(shí)現(xiàn)搜索過(guò)濾、高亮功能，感興趣的朋友跟隨小編一起看看吧2023-01-01
mpvue小程序循環(huán)動(dòng)畫(huà)開(kāi)啟暫停的實(shí)現(xiàn)方法
這篇文章主要介紹了mpvue小程序循環(huán)動(dòng)畫(huà)開(kāi)啟暫停的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
利用nginx部署vue項(xiàng)目的全過(guò)程
今天要用到服務(wù)器nginx,還需要把自己的vue的項(xiàng)目部署到服務(wù)器上去所以就寫(xiě)一下記錄下來(lái),下面這篇文章主要給大家介紹了關(guān)于利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-03-03