快捷導(dǎo)航

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

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

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

總結(jié)

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

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

前言

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

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

在vite.config.ts 中開(kāi)啟 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)入插件，我開(kāi)始懷疑是自動(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)目文件依賴(lài)的三方插件都刪的差不多，也還是無(wú)法熱更新…

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

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

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

錯(cuò)誤寫(xiě)法:

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

正確寫(xiě)法：

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

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

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

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

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

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

您可能感興趣的文章: