總結(jié)

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

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

前言

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

無法熱更新嘗試過的方法：

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

server:{
  hmr: true  // 配置自動刷新
}

重新run一下項目，更改頁面樣式后，頁面還是不會熱更新。

• 懷疑vite插件導致無法熱更新

因為項目中使用了 Element-plus 自動導入插件，我開始懷疑是自動導入插件搞的鬼，注釋自動導入插件，在main.ts 使用全局導入方式使用 Element-plus ，重啟項目，更改項目某個文件后返回瀏覽器，依然無法熱更新。

• 嘗試依次卸載各種插件

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

是的，直到我把整個項目文件依賴的三方插件都刪的差不多，也還是無法熱更新…

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

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

發(fā)現(xiàn)什么問題了嗎？ 是的，因為目錄名和文件名稱大小寫不一致，這么配置的路由表，所有頁面都不會熱更新了 ?。?/p>

錯誤寫法:

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

正確寫法：

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

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

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

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

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

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

最新評論