欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue靜態(tài)配置文件不進(jìn)行編譯的處理過程(在public中引入js)

 更新時(shí)間:2023年03月27日 09:33:01   作者:yehaocheng520  
這篇文章主要介紹了vue靜態(tài)配置文件不進(jìn)行編譯的處理過程(在public中引入js),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)證條

    vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證條

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue 滾動(dòng)行為的具體使用方法

    Vue 滾動(dòng)行為的具體使用方法

    本篇文章主要介紹了Vue 滾動(dòng)行為的具體使用方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • 如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式?

    如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式?

    本文主要介紹了如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue 打包體積優(yōu)化方案小結(jié)

    Vue 打包體積優(yōu)化方案小結(jié)

    這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化)

    Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化)

    這篇文章主要介紹了Vue3如何解決路由緩存問題(響應(yīng)路由參數(shù)的變化),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue實(shí)現(xiàn)table上下移動(dòng)功能示例

    Vue實(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-02
  • 100行代碼理解和分析vue2.0響應(yīng)式架構(gòu)

    100行代碼理解和分析vue2.0響應(yīng)式架構(gòu)

    通過100行代碼幫助大家理解和分析vue2.0響應(yīng)式架構(gòu)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • 關(guān)于VueSSR的一些理解和詳細(xì)配置

    關(guān)于VueSSR的一些理解和詳細(xì)配置

    這篇文章主要介紹了關(guān)于VueSSR的一些理解和詳細(xì)配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue中進(jìn)行路由懶加載的示例詳解

    Vue中進(jìn)行路由懶加載的示例詳解

    路由懶加載是一種優(yōu)化Vue應(yīng)用程序性能的技術(shù),本文介紹了Vue中如何進(jìn)行路由懶加載,包括使用Vue異步組件和Webpack代碼分割,需要的朋友可以參考下
    2023-06-06
  • 關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式

    關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式

    這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論