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是自己命名的你也可以寫別的。
只要下面獲取的時候根據(jù)這些名字匹配使用本地測試還是線上環(huán)境就行。
mpm run dev:test運行本地環(huán)境mpm run build:test用測試接口打包mpm run build:prod用線上接口打包
然后我們可以根據(jù)process.env.NODE_ENV這個變量獲取到輸入的命令行的：后面的內(nèi)容
我們新建一個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ā)過程中，根據(jù)項目要求，后臺部署了三個環(huán)境的接口，分別是：開發(fā)環(huán)境（開發(fā)時請求）、測試環(huán)境（部署測試環(huán)境請求）、生產(chǎn)環(huán)境（部署到線上環(huán)境請求），我們分別把他們稱之為：開發(fā)環(huán)境(development)、測試環(huán)境(test)、生產(chǎn)環(huán)境(production)。
.env文件
注意：請仔細閱讀下方文字?。?！
.env # 在所有的環(huán)境中被載入 .env.local # 在所有的環(huán)境中被載入，但會被 git 忽略 .env.[mode] # 只在指定的模式中被載入 .env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
創(chuàng)建.env文件
在項目根目錄創(chuàng)建以下文件
這三個文件分別代表：開發(fā)、測試、生產(chǎ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'
修改啟動命令，加載不同的.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 //生產(chǎn)環(huán)境打印 http://production
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue2(三)實現(xiàn)子菜單展開收縮，帶動畫效果實現(xiàn)方法
這篇文章主要介紹了vue實現(xiàn)收縮展開效果的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue中formdata傳值給后臺時參數(shù)為空的問題
這篇文章主要介紹了vue中formdata傳值給后臺時參數(shù)為空的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue中的Props(不可變狀態(tài)),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了使用 Vue 綁定單個或多個 Class 名的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了vue實現(xiàn)微信二次分享以及自定義分享的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Vue自定義指令實現(xiàn)對數(shù)字進行千分位分隔
對數(shù)字進行千分位分隔后展示應該是大部分同學都做過的功能了吧,常規(guī)的做法通常是編寫一個工具函數(shù)來對數(shù)據(jù)進行轉換,那么我們可不可以通過vue指令來實現(xiàn)這一功能呢,下面我們就來探索一下呢2024-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了使用vue制作FullPage頁面滾動效果，詳細的介紹了FullPage頁面的思路和實現(xiàn)，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了vue添加vue-awesome-swiper輪播組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理
這篇文章主要介紹了Vue.js條件渲染和列表渲染，以及Vue中key值的內(nèi)部原理，文中有詳細的代碼示例，感興趣的同學可以參考閱讀2023-04-04