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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論