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

更新時(shí)間：2023年03月17日 14:59:57 作者：信仰風(fēng)聲

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

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

具體操作是，

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

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

2，在vue項(xiàng)目中的index.html頁(yè)面引用這個(gè)config.js。利用window的屬性把地址在全局中暴露出來(lái)，

<!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，在你封裝的請(qǐng)求頁(yè)面，把這個(gè)全局暴露出來(lái)的Window屬性接口IP寫(xiě)到公共方法里面。

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

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

補(bǔ)充：vue項(xiàng)目打包后直接修改ip地址

在 Vue 項(xiàng)目的配置文件中可以設(shè)置 devServer.host 屬性來(lái)指定開(kāi)發(fā)服務(wù)器的主機(jī)名。打包后的項(xiàng)目文件中并不包含該配置，所以需要使用其他方式來(lái)修改 IP 地址。

一種方法是在本地的 hosts 文件中添加一條映射記錄，將域名映射到所需的 IP 地址上。例如，將 localhost 映射到 192.168.1.100：

192.168.1.100 localhost

然后在 Vue 項(xiàng)目中使用 localhost 就可以訪問(wèn)到所需的 IP 地址了。

另一種方法是使用一個(gè)代理服務(wù)器來(lái)轉(zhuǎn)發(fā)請(qǐng)求。可以使用 nginx 或其他類(lèi)似的工具來(lái)配置代理服務(wù)器，將請(qǐng)求轉(zhuǎn)發(fā)到所需的 IP 地址上。

還有一種方法是在本地修改 DNS 服務(wù)器的配置，將域名映射到所需的 IP 地址上。但這種方法需要較多的技術(shù)知識(shí)，并且需要對(duì) DNS 服務(wù)器有較高的控制權(quán)，不是很適合普通用戶使用。

到此這篇關(guān)于vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作)的文章就介紹到這了,更多相關(guān)vue打包生成可修改IP地址的文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: