Funkcia VITE's Hot Module Explaint (HMR) funguje dobre s aplikáciami Vue.js. Tu je niekoľko kľúčových bodov týkajúcich sa Vite's HMR a Vue.js:
Kľúčové body:
1. Integrácia prvej strany:- VITE poskytuje integráciu HMR prvej strany pre komponenty s jedným súborom VUE a React Fast Refresh. To znamená, že aplikácie Vue.js môžu využívať schopnosti HMR spoločnosti Vite bez ďalšieho nastavenia [1] [2].
2. Vue doplnok:
- V prípade aplikácií Vue.js sa odporúča používať oficiálny doplnok @ViteJS/Plugin-Vue. Tento doplnok poskytuje špecifické funkcie VUE 3 vrátane HMR, riešenia globálnych komponentov, smerníc a slotov [1] [2].
3. Vlastná konfigurácia:
- Ak používate jsx bez react alebo vue, vlastné `jsxfactory` a` jsxFragment` je možné nakonfigurovať pomocou možnosti `esbuild`. Napríklad pre preact ich môžete nakonfigurovať v súbore `vite.config.js` [1] [2].
4. Riešenie problémov:
- Ak HMR nefunguje v prehliadači, uistite sa, že poradie doplnku je správne v súbore `vite.config.js`. Zakázanie checkera Vite-plugin môže tiež pomôcť vyriešiť problémy [3].
5. Integrácia s knižnicami tretích strán:
- Ak chcete pridať HMR do komponentov Vue, ktoré sú načítané z knižnice tretích strán, musíte pridať knižnicu do aliasie do súboru `vite.config.js`. To zaisťuje, že VITE dokáže správne zistiť a aktualizovať komponenty počas HMR [4].
Záver:
Funkcia HMR spoločnosti Vite je navrhnutá tak, aby bezproblémovo pracovala s aplikáciami Vue.js. Použitím oficiálneho doplnku VUE a konfiguráciou možností `jsxFactory` a` jsxFragment` môžete zabezpečiť, aby HMR fungoval správne vo vašom projekte Vue.js. Riešenie problémov a integrácia knižníc tretích strán môže navyše pomôcť vyriešiť všetky problémy, ktoré môžu vzniknúť počas nastavenia HMR.Citácie:
[1] https://v3.vitejs.dev/guide/features
[2] https://vitejs.dev/guide/features
[3] https://stackoverflow.com/questions/74625283/Vue3-vite-hot-reload-hmr-no-working-in-the-browser
[4] https://github.com/viitejs/vite/discussions/7211
[5] https://inspector.dev/how-to-make-vite-hot-module-replacement-work-on-windows/