vue實現(xiàn)外部配置文件

需求:實現(xiàn)不重新打包修改loading文案,以及顏色。

思路:

1.需要webpack打包是不將自己定義的配置文件打包,這就需要我們將自定義的配置文件放到public里面(vue-cli3搭建的項目),如果是vue-cli2搭建的項目則需要將文件放到static里面。

2.需要打包后不會,將內(nèi)容寫死到打包后的文件中。如果是該圖片直接使用require就好。在img標簽的src中如下

<img src:'require("../../static/imgs/company-logo.png")' />

然后想要修改是直接將dist中的圖片換掉就好(注意:替換后的圖片名要與原圖片名一致(保證其哈希值一樣,不然會報錯))圖片這么干是可以的,=========》但是如果是用require去讀取js文件中暴露的對象則不行(網(wǎng)上百度出來的方法),親測打包后無法修改,也可能是我弄錯了吧

3.氣急敗壞下只能使用暴力方法了(希望有大佬能夠交點不那么蠢的方法)。。。。。。。(直接利用localStorage瀏覽器緩存)

具體實現(xiàn)如下:
1.在public中創(chuàng)建config.js文件

const config = {
    loadingText: "測試",
    loadingTextcolor: 'rgb(37, 146, 204)'
}
window.localStorage.setItem('config', window.JSON.stringify(config))

2.在index.html中使用config.js

 <script src="./config//loadingConfig.js"></script>

3.組件內(nèi)直接讀取localStorage中的數(shù)據(jù),至此就實現(xiàn)了外部配置。

坑: 在瀏覽器打開dist文件后會有緩存,這是我們?nèi)绻匦屡渲昧薱onfig.js中的數(shù)據(jù),需要清除瀏覽器緩存后再運行。包括圖片的外部修改也是一樣的

解決方案:

錯誤示范:

我們在index.html文件引入配置文件時在資源路徑后加上時間戳,(如果加時間戳你使用字符串模板會有坑,像這樣

   script.src = `./config/loadingConfig.js?t=${ new Date().getTime()}`

會在打包的時候就將你的獲取時間戳方法直接替換成時間字符串進行拼接

正解:

這個·時候我們可以直接使用字符串拼接的方法像這樣:

   script.src = "./config/loadingConfig.js?t=" + new Date().getTime();

如此做就不會有問題了。
到此完美解決,奧利給?。?!雖然看起來可能比較暴力,但解決了不是?忘有大佬指點!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容