Funkcija Hot Module Replacement (HMR) družbe Vite dobro deluje z aplikacijami Vue.js. Tukaj je nekaj ključnih točk o Vitejevem HMR in Vue.js:
Ključne točke:
1. Integracija prvega ponudnika:- Vite zagotavlja integracije HMR prvega proizvajalca za komponente ene datoteke Vue in React Fast Refresh. To pomeni, da lahko aplikacije Vue.js izkoristijo zmogljivosti Vite HMR brez dodatnih nastavitev[1][2].
2. Vue Plugin:
- Za aplikacije Vue.js je priporočljiva uporaba uradnega vtičnika @vitejs/plugin-vue. Ta vtičnik ponuja posebne funkcije Vue 3, vključno s HMR, globalnim razreševanjem komponent, direktivami in režami[1][2].
3. Konfiguracija po meri:
- Če uporabljate JSX brez React ali Vue, lahko `jsxFactory` in `jsxFragment` konfigurirate z možnostjo `esbuild`. Na primer, za Preact jih lahko konfigurirate v datoteki `vite.config.js`[1][2].
4. Odpravljanje težav:
- Če HMR ne deluje v brskalniku, se prepričajte, da je vrstni red vtičnikov pravilen v datoteki `vite.config.js`. Težave lahko pomaga tudi onemogočanje vite-plugin-checker[3].
5. Integracija s knjižnicami tretjih oseb:
- Če želite komponentam Vue dodati HMR, ki so naložene iz knjižnice tretje osebe, morate knjižnico dodati vzdevkom v datoteki `vite.config.js`. To zagotavlja, da lahko Vite pravilno zazna in posodobi komponente med HMR[4].
Zaključek:
Viteova funkcija HMR je zasnovana tako, da brezhibno deluje z aplikacijami Vue.js. Z uporabo uradnega vtičnika Vue in konfiguracijo možnosti `jsxFactory` in `jsxFragment` lahko zagotovite, da HMR pravilno deluje v vašem projektu Vue.js. Poleg tega lahko odpravljanje težav in integracija knjižnic tretjih oseb pomaga rešiti vse težave, ki se lahko pojavijo med nastavitvijo HMR.Citati:
[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/vitejs/vite/discussions/7211
[5] https://inspector.dev/how-to-make-vite-hot-module-replacement-work-on-windows/