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