vue怎么部署包可配置后臺接口地址

這篇文章主要介紹“vue怎么部署包可配置后臺接口地址”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue怎么部署包可配置后臺接口地址”文章能幫助大家解決問題。

有時候一個部署包可能要應用于不同服務器，這就需要頻繁更換后臺地址。
由此引申出了部署包可直接配置后臺地址的需求，這樣就不需要頻繁打包了。

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

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

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

同個文件夾下的index.html文件的head標簽內引入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獲取
（網上有一些是直接用axios獲取，但是我這里要同步操作，不然還沒返回數據代碼已經執行到下面去了，只能用XMLHttpRequest來獲取）

// request.jslet 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);

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

出現的問題

神奇的是根據上一篇文章“vue項目部署到IIS”部署到另一臺服務器的時候，居然失敗了！顯示“跨域”。搜了好久發現好多文章都是一樣的設置，后面讓后臺加了跨域的設置才成功了！
然后另一個問題出現了！！！
用ip地址訪問的時候，后臺接口地址還是顯示localhost，不會自動切換到ip訪問地址。
解決方案： 如果 ip 地址訪問的時候，要將config.json里面的后臺接口地址改成 ip 訪問的地址才可以（這樣不管是localhost還是ip地址都可以訪問到）
個人猜測： 出現這樣的原因是從json文件里獲取的是字符串，地址相當于寫死了，不會自動匹配成相應的IP地址。

關于“vue怎么部署包可配置后臺接口地址”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。