使用.env加后綴的方式來建立某個(gè)模式下的環(huán)境變量，
例如：項(xiàng)目根目錄新建兩個(gè)環(huán)境變量文件（development開發(fā)環(huán)境和production生產(chǎn)環(huán)境）：
.env.development
.env.production
?在新建的兩個(gè)環(huán)境變量文件中設(shè)置相同的環(huán)境變量名：
VUE_APP_BASE_API
環(huán)境變量名稱必須以"VUE_API_"+名稱的格式，否則不生效，這個(gè)格式是死的。至于后面部分就是自定義部分。
重點(diǎn)來了，我們?yōu)槭裁匆⑦@兩個(gè)環(huán)境變量的文件，那是因?yàn)槟芙鉀Q我們在開發(fā)的時(shí)候來回改動(dòng)服務(wù)器的困擾，有了這兩個(gè)環(huán)境變量文件，當(dāng)運(yùn)行（npm run serve）的時(shí)候自動(dòng)調(diào)取開發(fā)環(huán)境的變量，當(dāng)打包（npm run build）的時(shí)候就會(huì)調(diào)取生產(chǎn)環(huán)境的變量，這樣一來總是改動(dòng)了，即使以后更換了服務(wù)器，只要在這兩個(gè)地方修改即可。
.env.development文件命令：
#接口服務(wù)地址 VUE_APP_SERVICE_URL='http://localhost:8001/' #開發(fā)環(huán)境路徑前綴 VUE_APP_BASE_API='/dev-apis'
.env.production文件命令：
#生成環(huán)境路徑前綴
VUE_APP_BASE_API='/prod-apis'
vue.config.js文件命令調(diào)用環(huán)境變量：
環(huán)境變量的獲取使用"process.env."+環(huán)境變量名稱的方式，例如：
process.env.VUE_APP_BASE_API
一下是完整設(shè)置
module.exports={ devServer:{ port:8888,//前端端口 open:true,//運(yùn)行后瀏覽器自動(dòng)彈出 https:false,//不采用https加密方式 host:"localhost",//前端主機(jī)，也可以是127.0.0.1，如果能被外界訪問可以設(shè)置為0.0.0.0 proxy:{ [process.env.VUE_APP_BASE_API]:{//環(huán)境變量 target:process.env.VUE_APP_SERVICE_URL,//后端服務(wù)器，即：API服務(wù)器 changeOrigin:true,//是否允許跨域 pathRewrite:{//請求路徑重寫 ['^'+process.env.VUE_APP_BASE_API]:''//匹配開頭為環(huán)境變量值的字符串，后面設(shè)置空字符串。 } } } }, lintOnSave:false, //關(guān)閉格式檢查 productionSourceMap:false //在生產(chǎn)環(huán)境中不生成source map文件,可以減少編譯后代碼的體積 }
?文章來源地址http://www.zghlxwxcb.cn/news/detail-420448.html文章來源：http://www.zghlxwxcb.cn/news/detail-420448.html
?
到了這里，關(guān)于vue全家桶進(jìn)階之路50：Vue3 環(huán)境變量+跨域設(shè)置實(shí)例的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
