„Vite“ karšto modulio pakeitimo (HMR) funkcija gerai veikia su „Vue.js“ programomis. Čia yra keletas svarbiausių „Vite“ HMR ir Vue.js punktų:
Pagrindiniai taškai:
1. Pirmosios šalies integracija:- „Vite“ teikia pirmosios šalies HMR integracijas „Vue“ vieno failo komponentams ir greitai atnaujinti. Tai reiškia, kad „Vue.js“ programos gali panaudoti Vite HMR galimybes be papildomos sąrankos [1] [2].
2. „Vue“ papildinys:
- „Vue.js“ programoms rekomenduojama naudoti oficialų @Vitejs/Pillin-Vue papildinį. Šis papildinys pateikia „Vue 3“ specifines funkcijas, įskaitant HMR, globalų komponentų sprendimą, direktyvas ir laiko tarpsnius [1] [2].
3. Pasirinktinė konfigūracija:
- Jei naudojate JSX be „React“ ar „Vue“, pasirinktinį „JSXFactory“ ir „JSXFragment“ gali būti sukonfigūruoti naudojant parinktį „Esbuild“. Pvz., „PreAct“ galite juos sukonfigūruoti „Vite.config.js“ faile [1] [2].
4. Trikčių šalinimas:
- Jei HMR neveikia naršyklėje, įsitikinkite, kad papildinio užsakymas yra tinkamas faile „Vite.config.js“. Vite-Pugin-Checker išjungimas taip pat gali padėti išspręsti problemas [3].
5. Integracija su trečiųjų šalių bibliotekomis:
- Norėdami pridėti HMR prie „Vue“ komponentų, įkeltų iš trečiųjų šalių bibliotekos, turite pridėti biblioteką prie slapyvardžių į failą „Vite.config.js“. Tai užtikrina, kad „Vite“ gali teisingai aptikti ir atnaujinti komponentus HMR metu [4].
Išvada:
„Vite“ HMR funkcija yra skirta sklandžiai veikti naudojant „Vue.js“ programas. Naudodamiesi oficialiu „Vue“ papildiniu ir sukonfigūruodami „JSXFactory“ ir „JSXFragment“ parinktis, galite įsitikinti, kad HMR teisingai veikia jūsų „Vue.js“ projekte. Be to, trečiųjų šalių bibliotekų trikčių šalinimas ir integravimas gali padėti išspręsti visas problemas, kurios gali kilti HMR sąrankos metu.Citatos:
[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-replace-work-on-findows/