Vite의 HMR(핫 모듈 교체) 기능은 Vue.js 애플리케이션과 잘 작동합니다. Vite의 HMR 및 Vue.js에 대한 몇 가지 핵심 사항은 다음과 같습니다.
핵심 사항:
1. 자사 통합:- Vite는 Vue 단일 파일 구성 요소 및 React Fast Refresh를 위한 자사 HMR 통합을 제공합니다. 이는 Vue.js 애플리케이션이 추가 설정[1][2] 없이 Vite의 HMR 기능을 활용할 수 있음을 의미합니다.
2. Vue 플러그인:
- Vue.js 애플리케이션의 경우 공식 @vitejs/plugin-vue 플러그인을 사용하는 것이 좋습니다. 이 플러그인은 HMR, 전역 구성 요소 확인, 지시문 및 슬롯[1][2]을 포함한 Vue 3 특정 기능을 제공합니다.
3. 사용자 정의 구성:
- React 또는 Vue 없이 JSX를 사용하는 경우 `esbuild` 옵션을 사용하여 사용자 정의 `jsxFactory` 및 `jsxFragment`를 구성할 수 있습니다. 예를 들어 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' 옵션을 구성하면 HMR이 Vue.js 프로젝트에서 올바르게 작동하는지 확인할 수 있습니다. 또한 타사 라이브러리 문제 해결 및 통합은 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-hot-module-replacement-work-on-windows/