vue怎么根據(jù)不同環(huán)境使用不同的接口地址

本篇內(nèi)容介紹了“vue怎么根據(jù)不同環(huán)境使用不同的接口地址”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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文件

注意：請仔細(xì)閱讀下方文字！??！

.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下進(jìn)行修改

綠框位置代表：當(dāng)前命令加載的.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

“vue怎么根據(jù)不同環(huán)境使用不同的接口地址”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！