vite+vue3搭建的工程熱更新失效

前段時間開發(fā)新的項目，由于沒有技術(shù)上的限制，所以選擇了vite+vue3+ts來開發(fā)新的項目，一開始用vite來開發(fā)新項目過程挺順利，確實比vue2+webpack的項目高效些（為什么選擇vite）

但是過了一段時間后，不過怎么操作頁面修改頁面都無法及時刷新預(yù)覽頁面，各種糾結(jié)。

我覺得這是一個坑，為啥，請看下面的描述

按理說，我們無需要關(guān)心這些額外的配置，但是現(xiàn)在確實影響到了我們的開發(fā)體驗，

官網(wǎng)上也沒明確描述，仔細(xì)想想是什么原因?qū)е铝藷o法熱更新的問題，因為剛搭建完工程開發(fā)的時候確實是可以熱更新的，

仔細(xì)想了想發(fā)現(xiàn)好像是添加完路由出現(xiàn)這個問題的，

猜想如果沒有路由是不是可以熱更新呢，于是在App.vue中修改代碼發(fā)現(xiàn)確實可以及時熱更新，

現(xiàn)在可以基本上可以確定是路由問題的啦，各位可以自己試下。

怎么解決呢， 網(wǎng)上基本的解決方案是：

router 路由中名稱和引入文件路徑及文件名需要保證大小寫一致，

但是我仔細(xì)對比了下，發(fā)現(xiàn)我項目中路由引用的路徑名稱沒有寫錯，再次陷入思考，

到底是啥原因，那么只有可能是引入組件的方式不一致（因為我的路由頁面特別簡單只引入了一個頁面）

于是將路由引入的方式由靜態(tài)的改為動態(tài)的，管用了，但是想不明白，問題確實解決了。

靜態(tài)的寫法（不刷新）

import Index from '@/views/index.vue'
const routes = [
  {
    path: '/', component: Index
  }
]

動態(tài)的寫法（刷新）

const routes = [
  {
    path: '/', component: () => import('@/views/index.vue')
  }
]

至此，我的問題解決。

下面來看其他導(dǎo)致沒有熱更新的問題

1、vite.config.ts沒有配置熱更新為false，改正

server: {
    hmr: true,
    //vue3 vite配置熱更新不用手動刷新
 }

2、一次性出現(xiàn)了過多的錯誤，這種情況一般出現(xiàn)在我們從別的地方復(fù)制一大段代碼然后修改，即便是把所有的錯誤都解決了，熱更新也失效，這種情況得重啟服務(wù)。

3、長時間修改頁面未重啟過服務(wù)也會導(dǎo)致熱更新失效，這種情況也得重啟服務(wù)。

4、一些配置文件的修改也不會實時更新，需要我們重啟服務(wù)

changed tsconfig file detected: E:\****\tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論