溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“vue項目打包之后生成一個可修改IP地址文件怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue項目打包之后生成一個可修改IP地址文件怎么實現”文章吧。
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
//該方法為普通接口調用 請求頭不一樣 該請求頭為 application/json
function requestPost([dataList, methodInfo] = [{}, {}]) {
return axios.post(`${baseUrl}`, {
dataList,
methodInfo,
});
}這樣就完成了，重新打包之后，在static文件夾中會生成config.js的文件， 修改這個文件的地址，就可以更換IP地址了。
在 Vue 項目的配置文件中可以設置 devServer.host 屬性來指定開發服務器的主機名。打包后的項目文件中并不包含該配置，所以需要使用其他方式來修改 IP 地址。
一種方法是在本地的 hosts 文件中添加一條映射記錄，將域名映射到所需的 IP 地址上。例如，將 localhost 映射到 192.168.1.100：
192.168.1.100 localhost
然后在 Vue 項目中使用 localhost 就可以訪問到所需的 IP 地址了。
另一種方法是使用一個代理服務器來轉發請求。可以使用 nginx 或其他類似的工具來配置代理服務器，將請求轉發到所需的 IP 地址上。
還有一種方法是在本地修改 DNS 服務器的配置，將域名映射到所需的 IP 地址上。但這種方法需要較多的技術知識，并且需要對 DNS 服務器有較高的控制權，不是很適合普通用戶使用。
以上就是關于“vue項目打包之后生成一個可修改IP地址文件怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
