Viten Hot Module Replacement (HMR) -ominaisuus toimii hyvin Vue.js-sovellusten kanssa. Tässä on joitain avainkohtia Viten HMR:stä ja Vue.js:stä:
Pääkohdat:
1. Ensimmäisen osapuolen integrointi:- Vite tarjoaa ensimmäisen osapuolen HMR-integraatioita Vue Single File -komponenteille ja React Fast Refreshille. Tämä tarkoittaa, että Vue.js-sovellukset voivat hyödyntää Viten HMR-ominaisuuksia ilman lisäasetuksia[1][2].
2. Vue-laajennus:
- Vue.js-sovelluksissa on suositeltavaa käyttää virallista @vitejs/plugin-vue-laajennusta. Tämä laajennus tarjoaa Vue 3:lle erityisominaisuuksia, kuten HMR:n, globaalin komponenttien ratkaisun, ohjeet ja paikat[1][2].
3. Muokatut asetukset:
- Jos käytät JSX:ää ilman Reactia tai Vue:ta, mukautetut "jsxFactory" ja "jsxFragment" voidaan määrittää käyttämällä "esbuild"-vaihtoehtoa. Esimerkiksi Preactille voit määrittää ne vite.config.js-tiedostossa[1][2].
4. Vianetsintä:
- Jos HMR ei toimi selaimessa, varmista, että liitännäisten järjestys on oikea vite.config.js-tiedostossa. Vite-plugin-checkerin poistaminen käytöstä voi myös auttaa ratkaisemaan ongelmia[3].
5. Integraatio kolmannen osapuolen kirjastojen kanssa:
- Jos haluat lisätä HMR:n Vue-komponentteihin, jotka ladataan kolmannen osapuolen kirjastosta, sinun on lisättävä kirjasto vite.config.js-tiedoston aliaksiin. Tämä varmistaa, että Vite voi havaita ja päivittää komponentit oikein HMR:n aikana[4].
Johtopäätös:
Viten HMR-ominaisuus on suunniteltu toimimaan saumattomasti Vue.js-sovellusten kanssa. Käyttämällä virallista Vue-laajennusta ja määrittämällä jsxFactory- ja jsxFragment-vaihtoehdot voit varmistaa, että HMR toimii oikein Vue.js-projektissasi. Lisäksi vianetsintä ja kolmannen osapuolen kirjastojen integrointi voivat auttaa ratkaisemaan kaikki HMR:n asennuksen aikana mahdollisesti ilmenevät ongelmat.Lainaukset:
[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/