vue項目打包之后生成一個可修改IP地址的文件(具體操作)

更新時間：2023年03月17日 14:59:57 作者：信仰風聲

這篇文章主要介紹了vue項目打包之后生成一個可修改IP地址的文件(具體操作),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

今天在做項目的時候遇到了一個問題，就是把項目部署到不同的服務器上，但不能每次修改IP的時候就打包一次，這就增加了前端的工作量，經(jīng)過百度，發(fā)現(xiàn)有一些方法是可以的，親測可用。

具體操作是，

1，在static文件夾下面建立一個config.js文件，

(function () {
  window.SITE_CONFIG = {}
  // api接口請求地址  這里寫你后端要請求的接口地址，如果只是一個地址，可刪除下面的那個
  window.SITE_CONFIG['baseUrl'] = '請求的地址'
  window.SITE_CONFIG['baseUrl_two'] = '請求的地址'
 
})()

2，在vue項目中的index.html頁面引用這個config.js。利用window的屬性把地址在全局中暴露出來，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./src/assets/style/index.css" rel="external nofollow" >
    <title>修改IP</title>
    <script src="./static/config.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3，在你封裝的請求頁面，把這個全局暴露出來的Window屬性接口IP寫到公共方法里面。

import axios from './http'
import axiosTwo from './axiosTwo'
import store from '../store'
 
 let baseUrl=window.SITE_CONFIG.baseUrl
//該方法為普通接口調(diào)用  請求頭不一樣 該請求頭為 application/json
function requestPost([dataList, methodInfo] = [{}, {}]) {
    return axios.post(`${baseUrl}`, {
        dataList,
        methodInfo,
    });
}

這樣就完成了，重新打包之后，在static文件夾中會生成config.js的文件，修改這個文件的地址，就可以更換IP地址了。