vue靜態(tài)配置文件不進(jìn)行編譯的處理過程(在public中引入js)
vue靜態(tài)配置文件不進(jìn)行編譯的處理
前幾天同事提了一個(gè)要求,他想在vue
引入靜態(tài)配置文件,但是此文件不要進(jìn)行編譯。靜態(tài)配置文件中的參數(shù)還需要在其他的.vue
文件中使用配置文件中的參數(shù)。
我一開始的想法就是:要在src
同級(jí)目錄下,添加幾個(gè).env.xxx
的配置文件,然后在文件中配置NODE_ENV``NODE_BASE_URL
等參數(shù),然后在其他頁面就可以通過env.process.xxx
的方式來使用了。
但是同時(shí)要求不能進(jìn)行編譯,雖然我也不太清楚,編譯和不編譯對(duì)參數(shù)有什么影響。
最終方案如下
1.在public
文件中添加同級(jí)的static
文件夾,在文件夾中添加js
直接將參數(shù)掛載到window
上,然后其他頁面就可以直接使用了
2.public
中的index.html
中引入上面的文件要通過<%= BASE_URL %>
引入
vue靜態(tài)配置文件保存全局變量
應(yīng)用
配置一個(gè)不被編譯的靜態(tài)文件,打包上傳服務(wù)器后可以直接通過修改dist文件夾中的全局變量而改變代碼中的變量。
步驟
1.在src同級(jí)的static文件夾中新增一個(gè)staticConfig.js文件
2.為window添加一個(gè)對(duì)象屬性用于保存全局變量
3.在index.html文件中引入該文件
ps:在服務(wù)器上要注意src中文件路徑,可以通過控制臺(tái)查看文件路徑,在本地編譯時(shí)是/static/staticConfig.js,在服務(wù)器上或許需要/服務(wù)器文件夾名稱/static/staticConfig.js
4.通過window.staticConfig應(yīng)用該全局變量
5.通過控制臺(tái)打印的window可以找到配置的staticConfigKg
6.編譯完成后可以通過修改dist文件夾static中的該文件而直接變量
注: 一種錯(cuò)誤引用全局變量的方式(這種方式修改dist文件夾static中的staticConfig.js配置不生效)
使用步驟:
1.在staticConfig.js中通過export的方式返回變量
2.在用到全局變量的文件中import引入
3.通過configKg應(yīng)用該變量
4.通過控制臺(tái)打印configKg可以找到配置的變量
5.But 通過這種方式編譯后修改dist中的staticConfig.js配置變量不生效
問題分析
HTML通過順序執(zhí)行文檔流,代碼從上向下執(zhí)行到script標(biāo)簽時(shí)重寫了window,再執(zhí)行到body渲染頁面。
而import的方式在編譯生成dist文件時(shí)將配置文件也一起編譯了,從而導(dǎo)致修改服務(wù)器上staticConfig.js文件不生效。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式?
本文主要介紹了如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化)
這篇文章主要介紹了Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue實(shí)現(xiàn)table上下移動(dòng)功能示例
這篇文章主要介紹了Vue實(shí)現(xiàn)table上下移動(dòng)功能,結(jié)合實(shí)例形式分析了vue.js針對(duì)table表格元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02100行代碼理解和分析vue2.0響應(yīng)式架構(gòu)
通過100行代碼幫助大家理解和分析vue2.0響應(yīng)式架構(gòu)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式
這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09