vue部署包可配置后臺(tái)接口地址的方法

更新時(shí)間：2023年03月30日 09:51:55 作者：①條咸魚

這篇文章主要介紹了vue部署包可配置后臺(tái)接口地址的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

方法

1. public 新增 config.js 文件（會(huì)被惡意修改地址，不安全）

public 文件夾下的文件是不會(huì)被打包

// public/config.js
window.CUSTOM_CONFIG = {
	BASE_URL: 'http://localhost:9001',	// 后臺(tái)接口地址 
}

config.js放置位置

同個(gè)文件夾下的index.html文件的head標(biāo)簽內(nèi)引入config.js

<script src="<%= BASE_URL %>config.js" type='text/javascript'></script>

然后在需要的地方引入，如 axios 封裝的request.js文件：

const config = {
    baseURL: window.CUSTOM_CONFIG.BASE_URL,		// 引入 config.js 的配置
    timeout: 550000,
}
service = axios.create(config);

2. public 新增一個(gè) json 文件存放地址

// config.json
{
	"BASE_URL": "http://localhost:9001"
}

在這里插入圖片描述

然后在 axios 封裝的request.js文件下通過(guò)XMLHttpRequest獲取
（網(wǎng)上有一些是直接用axios獲取，但是我這里要同步操作，不然還沒(méi)返回?cái)?shù)據(jù)代碼已經(jīng)執(zhí)行到下面去了，只能用XMLHttpRequest來(lái)獲取）

// request.js
let xmlhttp = new XMLHttpRequest();
xmlhttp.open('get', './config.json', false);
xmlhttp.send(null);
let BASE_URL = JSON.parse(xmlhttp.responseText).BASE_URL;

let service = {};
const config = {
    baseURL: BASE_URL,
    timeout: 550000,
}
service = axios.create(config);

但是這樣瀏覽器會(huì)出現(xiàn)提示，搜了一下說(shuō)這個(gè)不會(huì)有什么影響？（強(qiáng)迫癥可能會(huì)看著不爽）

瀏覽器出現(xiàn)提示

出現(xiàn)的問(wèn)題

神奇的是根據(jù)上一篇文章“vue項(xiàng)目部署到IIS”部署到另一臺(tái)服務(wù)器的時(shí)候，居然失敗了！顯示“跨域”。搜了好久發(fā)現(xiàn)好多文章都是一樣的設(shè)置，后面讓后臺(tái)加了跨域的設(shè)置才成功了！

然后另一個(gè)問(wèn)題出現(xiàn)了?。?！
用ip地址訪問(wèn)的時(shí)候，后臺(tái)接口地址還是顯示localhost，不會(huì)自動(dòng)切換到ip訪問(wèn)地址。
解決方案： 如果 ip 地址訪問(wèn)的時(shí)候，要將config.json里面的后臺(tái)接口地址改成 ip 訪問(wèn)的地址才可以（這樣不管是localhost還是ip地址都可以訪問(wèn)到）
個(gè)人猜測(cè)： 出現(xiàn)這樣的原因是從json文件里獲取的是字符串，地址相當(dāng)于寫死了，不會(huì)自動(dòng)匹配成相應(yīng)的IP地址（個(gè)人見(jiàn)解，歡迎指正?。?/p>

在這里插入圖片描述