آموزش ساخت برنامه دسکتاپ با Vue, Vite, Electron قسمت دوم فعال کردن HMR

در این قسمت از آموزش، به فعال کردن HMR (Hot Module Replacement) در برنامه دسکتاپ با استفاده از Vue، Vite و Electron می‌پردازیم. HMR به شما اجازه می‌دهد تا تغییرات را بدون نیاز به رفرش کردن صفحه، بر روی برنامه‌ی خود ببینید.

ابتدا باید مطمئن شویم که Vite به درستی فعال شده است. برای این کار، باید فایل vite.config.js را ایجاد یا ویرایش کنیم و به صورت زیر تنظیمات را اعمال کنیم:


export default {
server: {
hmr: {
overlay: true
}
}
};


حال باید فایل main.js در بخش اصلی برنامه‌ی Electron و Vue را ویرایش کنیم. ابتدا باید Electron به‌عنوان یک ماژول نصب شود:


npm install --save-dev electron


سپس باید کد زیر را به فایل main.js اضافه کنیم:


if (import.meta.hot) {
import.meta.hot.accept();
}


حال باید فایل package.json را ویرایش کرده و این دستور را به نام start اضافه کنیم:


"start": "vite & electron ."


حال می‌توانید برنامه‌ی خود را اجرا کرده و تغییرات را به‌صورت فوری در آن مشاهده کنید.

با این مراحل ساده، شما می‌توانید HMR را در برنامه‌ی دسکتاپ خود با استفاده از Vue، Vite و Electron فعال کنید و به‌راحتی تغییرات را در آن مشاهده کنید.