快捷導(dǎo)航

Vite熱更新失效的問(wèn)題解決

更新時(shí)間：2024年08月29日 11:17:30 作者：OooooYi

本文主要介紹了Vite熱更新失效的問(wèn)題解決,原因是文件夾和文件名大小寫不一致,下面就來(lái)解決一下次問(wèn)題,感興趣的可以了解一下

總結(jié)

如果時(shí)刷新頁(yè)面時(shí)候會(huì)更新，可以確認(rèn)一下vite.config.js內(nèi)有無(wú)配置server:{hmr:true}，true為熱更新，false為不熱更新。
文件地址引用問(wèn)題，如：文件大小寫問(wèn)題、同一個(gè)文件夾下存在大駝峰小駝峰的命名方式的2種文件！

component: () => import('@/views/Console/index.vue') ?
// Console文件夾名稱是大寫字母開頭，而index.vue文件是小寫，問(wèn)題就在這里。
component: () => import('@/views/console/index.vue') ?
// 對(duì)應(yīng)文件夾和文件名稱都是小寫就不會(huì)有問(wèn)題了

前言

事情是這樣的，今天整理項(xiàng)目目錄文件，準(zhǔn)備把用vite搭建的項(xiàng)目中的目錄結(jié)構(gòu)重新歸類一下，由于個(gè)人比較喜歡文件夾以大寫駝峰式命名，整理文件目錄時(shí)，把包括 views 文件夾下的路由文件也以這種命名方式整理，整理完后發(fā)現(xiàn)頁(yè)面熱更新失效了。

無(wú)法熱更新嘗試過(guò)的方法：

在vite.config.ts 中開啟 hmr 熱更新

server:{
  hmr: true  // 配置自動(dòng)刷新
}

重新run一下項(xiàng)目，更改頁(yè)面樣式后，頁(yè)面還是不會(huì)熱更新。

懷疑vite插件導(dǎo)致無(wú)法熱更新

因?yàn)轫?xiàng)目中使用了 Element-plus 自動(dòng)導(dǎo)入插件，我開始懷疑是自動(dòng)導(dǎo)入插件搞的鬼，注釋自動(dòng)導(dǎo)入插件，在main.ts 使用全局導(dǎo)入方式使用 Element-plus ，重啟項(xiàng)目，更改項(xiàng)目某個(gè)文件后返回瀏覽器，依然無(wú)法熱更新。

嘗試依次卸載各種插件

卸載 tailwindcss ，刪除 tailwindcss 配置文件和樣式
重啟項(xiàng)目后，修改頁(yè)面，返回瀏覽器，還是無(wú)法熱更新。
…卸載其它三方插件

是的，直到我把整個(gè)項(xiàng)目文件依賴的三方插件都刪的差不多，也還是無(wú)法熱更新…

我開始瘋狂吐槽 vite 真垃圾，同時(shí)在網(wǎng)上尋找各種關(guān)于 vite 無(wú)法熱更新的帖子，可偏偏是那些寫著 **文件夾名稱請(qǐng)嚴(yán)格注意大小寫 **這句話，我沒(méi)有放在心上，因?yàn)槲矣X(jué)得我的文件目錄挺規(guī)范的 (雖然和前面那句注意大小寫沒(méi)有任何關(guān)系)，然后就是打臉現(xiàn)場(chǎng)：

下面這張圖是剛整理完目錄后的目錄以及路由文件：

發(fā)現(xiàn)什么問(wèn)題了嗎？是的，因?yàn)槟夸浢臀募Q大小寫不一致，這么配置的路由表，所有頁(yè)面都不會(huì)熱更新了！！

錯(cuò)誤寫法:

component: () => import('@/views/Console/index.vue')
// Console文件夾名稱是大寫字母開頭，而index.vue文件是小寫，問(wèn)題就在這里。

正確寫法：

component: () => import('@/views/console/index.vue')
// 對(duì)應(yīng)文件夾和文件名稱都是小寫就不會(huì)有問(wèn)題了

關(guān)于網(wǎng)上還有一種說(shuō)法，如果你不想去破壞當(dāng)前項(xiàng)目的文件夾和文件名結(jié)構(gòu)，可以只修改路由中目錄名或文件名，按照我對(duì)上面這句話的理解，vite 編譯時(shí)，識(shí)別文件夾和文件不區(qū)分大小寫，所以我們只需要把路由表的文件名大小寫改成一致就可以熱更新了，但是，嘗試過(guò)后，依然無(wú)法熱更新。（當(dāng)然你也可以試一下）

實(shí)在不想再瞎折騰了，我選擇手動(dòng)更改目錄，把所有關(guān)于路由文件的文件夾和 .vue文件都改成了小寫，終于，又可以正常熱更新了：

關(guān)于對(duì) 文件夾名稱嚴(yán)格注意大小寫 這個(gè)問(wèn)題的吐槽：

上面這句話本身就是一個(gè)坑，這里說(shuō)的大小寫，通常大家會(huì)理解為導(dǎo)入文件的時(shí)候目錄只要對(duì)了就行，可事實(shí)上并非如此，如果使用 windows 系統(tǒng)開發(fā)，為了避免你碰到 vite 無(wú)法熱更新的問(wèn)題，我的建議是：舍棄駝峰命名規(guī)范，然后，請(qǐng)嚴(yán)格按照小寫路徑來(lái)創(chuàng)建路由頁(yè)面文件夾和文件，多單詞用 - 分隔。

到此這篇關(guān)于Vite熱更新失效的問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vite熱更新失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: