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

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

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

我覺(jué)得這是一個(gè)坑，為啥，請(qǐng)看下面的描述

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

官網(wǎng)上也沒(méi)明確描述，仔細(xì)想想是什么原因?qū)е铝藷o(wú)法熱更新的問(wèn)題，因?yàn)閯偞罱ㄍ旯こ涕_(kāi)發(fā)的時(shí)候確實(shí)是可以熱更新的，

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

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

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

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

router 路由中名稱(chēng)和引入文件路徑及文件名需要保證大小寫(xiě)一致，

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

到底是啥原因，那么只有可能是引入組件的方式不一致（因?yàn)槲业穆酚身?yè)面特別簡(jiǎn)單只引入了一個(gè)頁(yè)面）

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

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

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

動(dòng)態(tài)的寫(xiě)法（刷新）

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

至此，我的問(wèn)題解決。

下面來(lái)看其他導(dǎo)致沒(méi)有熱更新的問(wèn)題

1、vite.config.ts沒(méi)有配置熱更新為false，改正

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

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

3、長(zhǎng)時(shí)間修改頁(yè)面未重啟過(guò)服務(wù)也會(huì)導(dǎo)致熱更新失效，這種情況也得重啟服務(wù)。

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

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

總結(jié)

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

最新評(píng)論