Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon HMR ของ Vite ทำงานได้ดีกับแอปพลิเคชัน vue.js


HMR ของ Vite ทำงานได้ดีกับแอปพลิเคชัน vue.js


คุณสมบัติการเปลี่ยนโมดูลร้อนของ 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/