vue如何根據(jù)不同的環(huán)境使用不同的接口地址
vue根據(jù)不同的環(huán)境使用不同的接口地址
package.json文件，添加。
??? "dev:test": "vue-cli-service serve --mode test", ?? ?"build:test": "vue-cli-service build --mode test", ?? ?"build:prod": "vue-cli-service build --mode prod",
代表npm命令行新增了幾條命令，這里的test和prod是自己命名的你也可以寫別的。
只要下面獲取的時(shí)候根據(jù)這些名字匹配使用本地測(cè)試還是線上環(huán)境就行。
mpm run dev:test運(yùn)行本地環(huán)境mpm run build:test用測(cè)試接口打包mpm run build:prod用線上接口打包
然后我們可以根據(jù)process.env.NODE_ENV這個(gè)變量獲取到輸入的命令行的：后面的內(nèi)容
我們新建一個(gè)config.js的文件存儲(chǔ)接口地址和appid等全局需要使用的一些變量。
let HOST = process.env.NODE_ENV|| 'prod';
let baseURL = "";
let appid = "";
if(HOST === 'prod'){? //正式服
? baseURL = "https://api.heebu.cn";
? appid = 'wx90ad292c1eb1105c';
}else if(HOST === 'test'){ // 測(cè)試
? baseURL = "https://testapi.heebu.cn";
? appid = 'wx9b070f1675720f2b';
}else{ // 本地
? baseURL = HOST;
? appid = 'wx9b070f1675720f2b';
}
export {
? baseURL,
? appid
}其他頁(yè)面可以引用這個(gè)config.js
import { baseURL,appid} from 'config.js'然后就可以使用這個(gè)baseURL啦。
vue不同環(huán)境，請(qǐng)求不同環(huán)境的接口
開發(fā)過程中，根據(jù)項(xiàng)目要求，后臺(tái)部署了三個(gè)環(huán)境的接口，分別是：開發(fā)環(huán)境（開發(fā)時(shí)請(qǐng)求）、測(cè)試環(huán)境（部署測(cè)試環(huán)境請(qǐng)求）、生產(chǎn)環(huán)境（部署到線上環(huán)境請(qǐng)求），我們分別把他們稱之為：開發(fā)環(huán)境(development)、測(cè)試環(huán)境(test)、生產(chǎn)環(huán)境(production)。
.env文件
注意：請(qǐng)仔細(xì)閱讀下方文字?。?！
.env # 在所有的環(huán)境中被載入 .env.local # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略 .env.[mode] # 只在指定的模式中被載入 .env.[mode].local # 只在指定的模式中被載入，但會(huì)被 git 忽略
創(chuàng)建.env文件
在項(xiàng)目根目錄創(chuàng)建以下文件
這三個(gè)文件分別代表：開發(fā)、測(cè)試、生產(chǎn)，運(yùn)行的.env文件
.env.development內(nèi)容：
VUE_APP_BASE_URL = 'http://development'
.env.test內(nèi)容：
VUE_APP_BASE_URL = 'http://test'
.env.production內(nèi)容：
VUE_APP_BASE_URL = 'http://production'
修改啟動(dòng)命令，加載不同的.env文件
打開package.json文件
在scripts下進(jìn)行修改
綠框位置代表：當(dāng)前命令加載的.env文件
//例： npm run serve //執(zhí)行此命令 則運(yùn)行 .env.development文件 npm run test//執(zhí)行此命令 則運(yùn)行 .env.test文件 npm run production//執(zhí)行此命令 則運(yùn)行 .env.production文件
獲取環(huán)境變量
可以js文件中通過
console.log(process.env.VUE_APP_BASE_URL) //開發(fā)環(huán)境打印 http://development //測(cè)試環(huán)境打印 http://test //生產(chǎn)環(huán)境打印 http://production
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)
這篇文章主要介紹了ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue如何動(dòng)態(tài)給id設(shè)置style樣式
這篇文章主要介紹了Vue如何動(dòng)態(tài)給id設(shè)置style樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
談一談vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
Vue如何用this.$set改變數(shù)組里的某個(gè)值
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個(gè)值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對(duì)象的值，需要的朋友可以參考下2022-12-12
下面小編就為大家分享一篇elementui的默認(rèn)樣式修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過來(lái)看看吧2018-02-02
element帶輸入建議el-autocomplete的使用
本文主要介紹了element帶輸入建議el-autocomplete的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
眾所周知keep-alive是Vue提供的一個(gè)抽象組件，主要是用來(lái)對(duì)組件進(jìn)行緩存，從而做到節(jié)省性能，這篇文章主要給大家介紹了關(guān)于vue中keep-alive組件用法的相關(guān)資料,需要的朋友可以參考下2021-05-05
vue+webpack實(shí)現(xiàn)異步組件加載的方法
下面小編就為大家分享一篇vue+webpack實(shí)現(xiàn)異步組件加載的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02