vue項(xiàng)目打包之后生成一個(gè)可修改IP地址的文件(具體操作)
今天在做項(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)配置代理服務(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中關(guān)閉彈窗組件時(shí)銷(xiāo)毀并隱藏操作
這篇文章主要介紹了Vue中關(guān)閉彈窗組件時(shí)銷(xiāo)毀并隱藏操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09使用Vue3和ApexCharts實(shí)現(xiàn)交互式3D折線圖
ApexCharts 是一個(gè)功能強(qiáng)大的 JavaScript 庫(kù),用于創(chuàng)建交互式、可定制的圖表,在 Vue.js 中,它可以通過(guò) vue3-apexcharts 插件輕松集成,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)交互式3D折線圖,需要的朋友可以參考下2024-06-06elementUI 動(dòng)態(tài)生成幾行幾列的方法示例
這篇文章主要介紹了elementUI 動(dòng)態(tài)生成幾行幾列的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue+element-ui實(shí)現(xiàn)表格編輯的三種實(shí)現(xiàn)方式
這篇文章主要介紹了vue+element-ui實(shí)現(xiàn)表格編輯的三種實(shí)現(xiàn)方式,主要有表格內(nèi)部顯示和編輯切換,通過(guò)彈出另外一個(gè)表格編輯和直接通過(guò)樣式控制三種方式,感興趣的小伙伴們可以參考一下2018-10-10vue安裝less-loader依賴失敗問(wèn)題及解決方案
這篇文章主要介紹了vue安裝less-loader依賴失敗問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08使用vite搭建ssr活動(dòng)頁(yè)架構(gòu)的實(shí)現(xiàn)
本文主要介紹了使用vite搭建ssr活動(dòng)頁(yè)架構(gòu),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07