vue打包后生成一個配置文件可以修改IP
更新時間：2023年03月17日 08:38:29 作者：JINMINGIS
本文主要介紹了修改Vue項目運行的IP和端口，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
需求說明
因為項目要適應各個地方，需要配置不同的IP，如果還是依賴于開發(fā)人員按照不同的地區(qū)打包，對于項目安裝包管理起來是比較麻煩的。所以需要通過配置文件來解決這個問題。
剛開始覺得ip是開發(fā)是就寫死了的，應該是不可以修改的，但是通過百度大法找到了解決的辦法，但是實現(xiàn)起來還是存在一些問題。從這篇文章中學習到了如何解決這個問題
實現(xiàn)
安裝插件
npm install --save-dev generate-asset-webpack-plugin
修改vue.config.js中的文件
let GenerateAssetPlugin = require('generate-asset-webpack-plugin');
let createServerConfig = function(compilation){
let cfgJson={ApiUrl:"192.168.1.174:8040"};
return JSON.stringify(cfgJson);
}
由于chrome禁止ajax訪問本地文件，所以換成了jsonP訪問數(shù)據(jù)
<script>
function getJson(data){
// data 就是要取的json數(shù)據(jù)
console.log(data);
localStorage.setItem('IP', JSON.stringify(data))
// 可以在函數(shù)內(nèi)部對json數(shù)據(jù)進行處理
}
</script>
<script typeof="text/javascript" src="serverconfig.json?callback=getJson"></script>
json文件
getJson要和前面的名稱一致，并且需要在打包自行添加
getJson({"ApiUrl":"192.168.1.123:8088"})
然后就可以實現(xiàn)通過配置文件來改變IP了，在使用過程中跨域問題確實比較麻煩，通過修改瀏覽器設置對于實施來說不太友好，所以參考選擇了jsonP實現(xiàn)獲取到本地json文件。
到此這篇關于vue打包后生成一個配置文件可以修改IP的文章就介紹到這了,更多相關vue打包后修改IP內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了undefined是否會變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關于Vue3使用JSX的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
國密SM4算法是一種對稱加密算法，適用于對稱密鑰加密和解密的場景，這篇文章主要介紹了vue使用國密SM4進行加密、解密,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue 中自定義指令改變data中的值,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
Vue?axios和vue-axios的關系及使用區(qū)別
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關系，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Ant Design Pro 菜單自定義 icon，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文是基于vue官方風格指南整理的關于Vue前端開發(fā)規(guī)范(推薦),非常不錯，具有參考借鑒借鑒價值，需要的朋友可以參考下2018-04-04
這篇文章主要給大家詳細介紹一下Vue3中的基本語法，文中的示例代碼講解詳細，對我們學習Vue3有一定的幫助，感興趣的小伙伴可以了解一下2022-11-11
詳解Vue + Vuex 如何使用 vm.$nextTick
這篇文章主要介紹了詳解Vue + Vuex 如何使用 vm.$nextTick，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11