Vue2打包部署后可動態(tài)修改后端接口地址的解決方法

更新時間：2024年07月15日 10:11:13 作者：智航云科技

本篇文章將介紹使用Vue2開發(fā)前后端分離項目時,前端打包部署后可動態(tài)修改后端接口地址的解決方法,文中通過圖文結合的方式介紹的非常詳細,需要的朋友可以參考下

一、背景

在前后端開發(fā)過程中，大家往往使用的是前后端分離模式進行開發(fā)，最終部署服務器也分開進行部署，因為前后端分離，前端要訪問到后端接口需要將后臺的接口地址打包到前端項目中，但是面對多變復雜的環(huán)境時，我們不能僅僅因為需要改個接口地址就得重新打包，上傳部署，比較麻煩，而且我們如果給客戶部署使用的時候還得提前獲取到客戶要部署服務的IP地址，或者就得帶著電腦，獲取到客戶的信息后，隨時打包部署，這樣不僅不夠專業(yè)，也比較麻煩，所以我們需要前端項目打包后，可動態(tài)配置后端接口地址且不影響前端功能的方法。

二、解決方法

以下介紹一種通過讀取配置js的方式實現，打包后動態(tài)修改IP的方法步驟，如下：

1.在public文件夾下創(chuàng)建config文件夾，并創(chuàng)建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環(huán)境中設置的接口地址
var baseUrl = process.env.VUE_APP_BASE_API
// 判斷是否使用配置文件中的接口地址
if(switch1){
	// 開關開啟，替換接口地址
	baseUrl = config.BaseUrl
}

const service = axios.create({
	// 設置后端請求接口地址
	baseURL:baseUrl
})

至此完成代碼部分的編寫，后續(xù)測試的話，可以通過打包命令，打包完成后到dist文件夾下，修改config文件夾下的 config.js進行后端接口的動態(tài)修改了。
dist打包后的目錄是這個樣子的：

在這里插入圖片描述