快捷導(dǎo)航

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

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

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

一、背景

在前后端開發(fā)過程中，大家往往使用的是前后端分離模式進(jìn)行開發(fā)，最終部署服務(wù)器也分開進(jìn)行部署，因?yàn)榍昂蠖朔蛛x，前端要訪問到后端接口需要將后臺(tái)的接口地址打包到前端項(xiàng)目中，但是面對(duì)多變復(fù)雜的環(huán)境時(shí)，我們不能僅僅因?yàn)樾枰膫€(gè)接口地址就得重新打包，上傳部署，比較麻煩，而且我們?nèi)绻o客戶部署使用的時(shí)候還得提前獲取到客戶要部署服務(wù)的IP地址，或者就得帶著電腦，獲取到客戶的信息后，隨時(shí)打包部署，這樣不僅不夠?qū)I(yè)，也比較麻煩，所以我們需要前端項(xiàng)目打包后，可動(dòng)態(tài)配置后端接口地址且不影響前端功能的方法。

二、解決方法

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

1.在public文件夾下創(chuàng)建config文件夾，并創(chuàng)建config.js文件

在這里插入圖片描述

2.編寫config.js內(nèi)容

const config = {
	// 配置的后端接口地址
	"BaseUrl":"http://127.0.0.1:8080",
	// 配置的開關(guān)按鈕，是否讀取當(dāng)前配置文件
	"switch": false
}

3.在index.html中加載config.js

打開public 文件夾下的 index.html文件，然后在head 標(biāo)簽中添加以下代碼：

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

如果你的config.js位置與我的不同，一定要修改引用地址。不要寫錯(cuò)引用地址，不然會(huì)報(bào)錯(cuò)，我當(dāng)時(shí)因?yàn)槎鄬懥藗€(gè)public路徑結(jié)果卡在這個(gè)問題上了1個(gè)小時(shí)。

4.在封裝axios工具類的js中修改配置

我們axios是封裝到一個(gè)request.js中了，就是放到 axios.create({}) 前面設(shè)置獲取 config.js中配置后端接口地址的邏輯即可。如下：

在這里插入圖片描述

// 開關(guān)，是否使用配置文件中配置的接口地址
var switch1 = config.switch
// 默認(rèn)使用 env環(huán)境中設(shè)置的接口地址
var baseUrl = process.env.VUE_APP_BASE_API
// 判斷是否使用配置文件中的接口地址
if(switch1){
	// 開關(guān)開啟，替換接口地址
	baseUrl = config.BaseUrl
}

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

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

在這里插入圖片描述