Vite의 HMR (Hot Module Replacement) 기능은 vue.js 응용 프로그램에서 잘 작동합니다. Vite의 HMR 및 Vue.js에 대한 몇 가지 핵심 사항은 다음과 같습니다.
키 포인트 :
1. 자사 통합 :-Vite는 VUE 단일 파일 구성 요소에 대한 첫 번째 파티 HMR 통합을 제공하고 빠른 새로 고침을 반응합니다. 이는 vue.js 응용 프로그램이 추가 설정없이 Vite의 HMR 기능을 활용할 수 있음을 의미합니다 [1] [2].
2. Vue 플러그인 :
-Vue.js 응용 프로그램의 경우 공식 @vitejs/plugin-vue 플러그인을 사용하는 것이 좋습니다. 이 플러그인은 HMR, 글로벌 구성 요소 해결, 지침 및 슬롯을 포함한 VUE 3 특정 기능을 제공합니다 [1] [2].
3. 사용자 정의 구성 :
-React 또는 Vue없이 JSX를 사용하는 경우 사용자 정의`jsxfactory` 및`jsxfragment '는`esbuild` 옵션을 사용하여 구성 할 수 있습니다. 예를 들어, preact의 경우`vite.config.js` 파일 [1] [2]에서이를 구성 할 수 있습니다.
4. 문제 해결 :
-HMR이 브라우저에서 작동하지 않는 경우 플러그인 순서가`vite.config.js` 파일에 적합한 지 확인하십시오. Vite-Plugin-Checker를 비활성화하면 문제 해결에 도움이 될 수 있습니다 [3].
5. 타사 라이브러리와의 통합 :
- 타사 라이브러리에서로드 된 vue 구성 요소에 HMR을 추가하려면`vite.config.js` 파일의 별칭에 라이브러리를 추가해야합니다. 이를 통해 VITE는 HMR 동안 구성 요소를 올바르게 감지하고 업데이트 할 수 있습니다 [4].
결론:
Vite의 HMR 기능은 vue.js 응용 프로그램과 완벽하게 작동하도록 설계되었습니다. 공식 VUE 플러그인을 사용하고`jsxfactory` 및`jsxfragment` 옵션을 구성하면 vue.js 프로젝트에서 HMR이 올바르게 작동하는지 확인할 수 있습니다. 또한 타사 라이브러리 문제 해결 및 통합은 HMR 설정 중에 발생할 수있는 모든 문제를 해결하는 데 도움이 될 수 있습니다.인용 :
[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-module-replacement-on-windows/