vue項目打包之后生成一個可修改IP地址的文件(具體操作)
今天在做項目的時候遇到了一個問題, 就是把項目部署到不同的服務(wù)器上, 但不能每次修改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地址了。
補充:vue項目打包后直接修改ip地址
在 Vue 項目的配置文件中可以設(shè)置 devServer.host 屬性來指定開發(fā)服務(wù)器的主機名。打包后的項目文件中并不包含該配置,所以需要使用其他方式來修改 IP 地址。
一種方法是在本地的 hosts 文件中添加一條映射記錄,將域名映射到所需的 IP 地址上。例如,將 localhost 映射到 192.168.1.100:
192.168.1.100 localhost
然后在 Vue 項目中使用 localhost 就可以訪問到所需的 IP 地址了。
另一種方法是使用一個代理服務(wù)器來轉(zhuǎn)發(fā)請求??梢允褂?nginx 或其他類似的工具來配置代理服務(wù)器,將請求轉(zhuǎn)發(fā)到所需的 IP 地址上。
還有一種方法是在本地修改 DNS 服務(wù)器的配置,將域名映射到所需的 IP 地址上。但這種方法需要較多的技術(shù)知識,并且需要對 DNS 服務(wù)器有較高的控制權(quán),不是很適合普通用戶使用。
到此這篇關(guān)于vue項目打包之后生成一個可修改IP地址的文件(具體操作)的文章就介紹到這了,更多相關(guān)vue打包生成可修改IP地址的文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖
ApexCharts 是一個功能強大的 JavaScript 庫,用于創(chuàng)建交互式、可定制的圖表,在 Vue.js 中,它可以通過 vue3-apexcharts 插件輕松集成,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖,需要的朋友可以參考下2024-06-06vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式
這篇文章主要介紹了vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式,主要有表格內(nèi)部顯示和編輯切換,通過彈出另外一個表格編輯和直接通過樣式控制三種方式,感興趣的小伙伴們可以參考一下2018-10-10使用vite搭建ssr活動頁架構(gòu)的實現(xiàn)
本文主要介紹了使用vite搭建ssr活動頁架構(gòu),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07