文章目錄
- 前言
- 一、背景
- 二、解決方法
- 1.在public文件夾下創建config文件夾，并創建config.js文件
- 2.編寫config.js內容
- 3.在index.html中加載config.js
- 4.在封裝axios工具類的js中修改配置
- 總結
前言
本篇文章將介紹使用Vue2開發前后端分離項目時，前端打包部署后可動態修改后端接口地址的解決方法。
一、背景
在前后端開發過程中，大家往往使用的是前后端分離模式進行開發，最終部署服務器也分開進行部署，因為前后端分離，前端要訪問到后端接口需要將后臺的接口地址打包到前端項目中，但是面對多變復雜的環境時，我們不能僅僅因為需要改個接口地址就得重新打包，上傳部署，比較麻煩，而且我們如果給客戶部署使用的時候還得提前獲取到客戶要部署服務的IP地址，或者就得帶著電腦，獲取到客戶的信息后，隨時打包部署，這樣不僅不夠專業，也比較麻煩，所以我們需要前端項目打包后，可動態配置后端接口地址且不影響前端功能的方法。
二、解決方法
以下介紹一種通過讀取配置js的方式實現，打包后動態修改IP的方法步驟，如下：
1.在public文件夾下創建config文件夾，并創建config.js文件
2.編寫config.js內容
const config = {// 配置的后端接口地址"BaseUrl":"http://127.0.0.1:8080",// 配置的開關按鈕，是否讀取當前配置文件"switch": false
}
3.在index.html中加載config.js
打開public 文件夾下的 index.html文件，然后在head 標簽中添加 以下代碼：
<script type="text/javascript" src="/config/config.js"> </script>
如果你的config.js位置與我的不同，一定要修改引用地址。不要寫錯引用地址，不然會報錯，我當時因為多寫了個public路徑結果卡在這個問題上了1個小時。
4.在封裝axios工具類的js中修改配置
我們axios是封裝到一個request.js中了，就是放到 axios.create({}) 前面設置獲取 config.js中配置后端接口地址的邏輯即可。如下：
// 開關，是否使用配置文件中配置的接口地址
var switch1 = config.switch
// 默認使用 env環境中設置的接口地址
var baseUrl = process.env.VUE_APP_BASE_API
// 判斷是否使用配置文件中的接口地址
if(switch1){// 開關開啟，替換接口地址baseUrl = config.BaseUrl
}const service = axios.create({// 設置后端請求接口地址baseURL:baseUrl
})至此完成代碼部分的編寫，后續測試的話，可以通過打包命令，打包完成后到dist文件夾下，修改config文件夾下的 config.js進行后端接口的動態修改了。
dist打包后的目錄是這個樣子的：
總結
到此這篇關于vue打包后修改配置后端接口地址的方法就介紹到這了。還有其他的方式也能修改，我用過其他產品，是在打包后的index.html中的script標簽中直接寫后端接口地址的，后續有時間會接著更新其他方法。
)
