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