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