快捷導(dǎo)航

vue部署包可配置后臺接口地址的方法

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

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

方法

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

public 文件夾下的文件是不會被打包

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

config.js放置位置

同個文件夾下的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 新增一個 json 文件存放地址

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

在這里插入圖片描述

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

// 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);

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

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

出現(xiàn)的問題

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

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

在這里插入圖片描述