Vue無(wú)法訪問(wèn).env.development定義的變量值問(wèn)題及解決

更新時(shí)間：2023年01月10日 09:38:38 作者：longzhoufeng

這篇文章主要介紹了Vue無(wú)法訪問(wèn).env.development定義的變量值問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue無(wú)法訪問(wèn).env.development定義的變量值

在.env.development定義變量時(shí)，發(fā)現(xiàn)獲取不取值。

比方：原來(lái)的定義的一個(gè)變量，是可以訪問(wèn)的

VUE_APP_BASE_API = '/dev-api'

上面的是可以訪問(wèn)的

后來(lái)發(fā)現(xiàn)有多個(gè)接口，需要調(diào)用不同地址訪問(wèn)，就需要配置多個(gè)代理服務(wù)器的IP，我自己又定義了一個(gè)服務(wù)器地址：APP_DEV_USER_API = ‘/devApi’

輸出是：undefined

后來(lái)翻看官方文檔發(fā)現(xiàn)定義變量必須以：VUE_APP_XXXX 開(kāi)頭

VUE_APP_PRO_API = '/proApi'

vue中.env | .env.development | .env.production使用

.env——全局默認(rèn)配置文件，無(wú)論什么環(huán)境都會(huì)加載合并
.env.development——開(kāi)發(fā)環(huán)境下的配置文件
.env.production——生產(chǎn)環(huán)境下的配置文件

注意：屬性名必須以VUE_APP_開(kāi)頭，比如VUE_APP_xxx = "變量"

首先在跟目錄創(chuàng)建三個(gè)文件

分別是.env.development、.env.production、.env.staging三個(gè)文件

# 頁(yè)面標(biāo)題
VUE_APP_TITLE = 若依管理系統(tǒng)
 
// .env.development文件里編寫(xiě)，NODE_ENV default is development
 
# 開(kāi)發(fā)環(huán)境配置
ENV = 'development'
 
# 若依管理系統(tǒng)/開(kāi)發(fā)環(huán)境
VUE_APP_BASE_API = '/dev-api'
 
# 路由懶加載
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# 頁(yè)面標(biāo)題
VUE_APP_TITLE = 若依管理系統(tǒng)
 
# 生產(chǎn)環(huán)境配置
ENV = 'production'
 
# 若依管理系統(tǒng)/生產(chǎn)環(huán)境
VUE_APP_BASE_API = '/prod-api'
 
// .env.production文件里編寫(xiě) NODE_ENV default is production

# 頁(yè)面標(biāo)題
VUE_APP_TITLE = 若依管理系統(tǒng)
 
NODE_ENV = production
 
# 測(cè)試環(huán)境配置
ENV = 'staging'
 
# 若依管理系統(tǒng)/測(cè)試環(huán)境
VUE_APP_BASE_API = '/stage-api'

vue-cli-service build 自定義參數(shù)

vue-cli-service build

（1）**作用：**是打包資源文件

（2）**工具：**通過(guò)腳手架依賴(lài)的dotenv模塊實(shí)現(xiàn)參數(shù)定義和讀取

（3）**原理：**detenv作用是將環(huán)境變量從.env文件加載到process.env中，代碼就可以通過(guò)process.env.VUE_APP_XX訪問(wèn)自定義的VUE_APP_XX的值了

在vue-cli-service的packjson中切換環(huán)境

(1) 在運(yùn)行時(shí)如果需要區(qū)分生產(chǎn)環(huán)境和測(cè)試環(huán)境，只需要

“scriptes”: {
“serve”: “vue-cli-service serve”, // 會(huì)將process.env.NODE_ENV設(shè)置為development
“build”: “vue-cli-service build” // 會(huì)將process.env.NODE_ENV設(shè)置為production
}

(2)在build時(shí)在dist/目錄會(huì)有用于生產(chǎn)環(huán)境的包，需要添加選項(xiàng)–mode區(qū)分測(cè)試環(huán)境和生產(chǎn)環(huán)境

“scripts”: {
“build:test”: “vue-cli-service build --mode test”, // 測(cè)試環(huán)境
“build:prod”: “vue-cli-service build --mode prod”, // 生產(chǎn)環(huán)境
},

"build:dev": "vue-cli-service build --mode dev",?? ?// 打包開(kāi)發(fā)環(huán)境
"build:test": "vue-cli-service build --mode test",?? ?// 打包集成測(cè)試
"build:uat": "vue-cli-service build --mode uat",?? ?// 打包驗(yàn)收測(cè)試
"build:prod": "vue-cli-service build --mode prod",?? ?// 打包生產(chǎn)環(huán)境