คุณสมบัติการเปลี่ยนโมดูลร้อนของ Vite (HMR) ทำงานได้ดีกับแอปพลิเคชัน Vue.js นี่คือประเด็นสำคัญบางประการเกี่ยวกับ HMR และ Vue.js ของ Vite:
ประเด็นสำคัญ:
1. การรวมบุคคลแรก:- VITE ให้การรวม HMR ของบุคคลแรกสำหรับส่วนประกอบไฟล์เดี่ยว Vue และตอบสนองการรีเฟรชอย่างรวดเร็ว ซึ่งหมายความว่าแอปพลิเคชัน Vue.js สามารถใช้ประโยชน์จากความสามารถของ HMR ของ Vite โดยไม่ต้องตั้งค่าเพิ่มเติม [1] [2]
2. ปลั๊กอิน VUE:
- สำหรับแอปพลิเคชัน vue.js ขอแนะนำให้ใช้ปลั๊กอิน @vitejs/ปลั๊กอินอย่างเป็นทางการ ปลั๊กอินนี้มีคุณสมบัติเฉพาะของ Vue 3 รวมถึง HMR การแก้ไขส่วนประกอบทั่วโลกคำสั่งและสล็อต [1] [2]
3. การกำหนดค่าที่กำหนดเอง:
- หากใช้ JSX โดยไม่มี React หรือ Vue คุณสามารถกำหนดค่า `jsxfactory 'และ` jsxfragment' ได้โดยใช้ตัวเลือก `esbuild` ตัวอย่างเช่นสำหรับ preact คุณสามารถกำหนดค่าสิ่งเหล่านี้ในไฟล์ `vite.config.js` [1] [2]
4. การแก้ไขปัญหา:
- หาก HMR ไม่ทำงานในเบราว์เซอร์ตรวจสอบให้แน่ใจว่าคำสั่งปลั๊กอินเหมาะสมในไฟล์ `vite.config.js` การปิดใช้งาน Vite-Plugin-Checker ยังสามารถช่วยแก้ไขปัญหา [3]
5. การรวมเข้ากับห้องสมุดบุคคลที่สาม:
- ในการเพิ่มส่วนประกอบ HMR ไปยัง Vue ซึ่งโหลดจากไลบรารีของบุคคลที่สามคุณต้องเพิ่มไลบรารีลงในนามแฝงในไฟล์ `vite.config.js` สิ่งนี้ทำให้มั่นใจได้ว่า VITE สามารถตรวจจับและอัปเดตส่วนประกอบได้อย่างถูกต้องระหว่าง HMR [4]
บทสรุป:
คุณสมบัติ HMR ของ Vite ได้รับการออกแบบให้ทำงานได้อย่างราบรื่นกับแอปพลิเคชัน 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-roload-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/