能否将Electron.js与Vue 3、Vite结合实现Electron热重载？

当然可以将三者结合，并且完全能实现热重载，不用每次修改代码都重新构建再启动Electron。下面是具体的实现步骤：

1. 安装必要依赖 #

首先安装Electron和Vite的Electron插件，用它来简化主进程的热重载配置：

npm install electron vite-plugin-electron -D

2. 配置Vite #

修改项目根目录下的vite.config.js，添加Electron插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: 'src/main.js' // 指向你的Electron主进程文件路径
    })
  ]
})

3. 修改主进程加载逻辑 #

更新你的main.js，根据环境变量切换开发/生产环境的加载方式：

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 根据你的需求调整，建议开启contextIsolation增强安全性
      contextIsolation: true,
      nodeIntegration: false
    }
  })

  // 开发环境加载Vite服务器URL，生产环境加载打包后的静态文件
  if (process.env.VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL)
    // 可选：自动打开开发者工具
    mainWindow.webContents.openDevTools()
  } else {
    mainWindow.loadFile(path.join(__dirname, '/dist/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

4. 配置启动脚本 #

在package.json中更新scripts，添加开发启动命令：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build && electron-builder",
    "electron:dev": "vite dev"
  }
}

热重载效果说明 #

• 渲染进程（Vue代码）：Vite会自动处理热重载，修改组件后页面实时更新，无需刷新。
• 主进程代码：vite-plugin-electron会监听主进程文件的变化，自动重启Electron主进程，不用手动停止再启动。

替代方案（不用插件） #

如果不想用vite-plugin-electron，可以用nodemon监听主进程文件，配合Vite开发服务器：

1. 安装nodemon：npm install nodemon -D
2. 修改scripts：

{
  "scripts": {
    "vite:dev": "vite",
    "electron:dev": "nodemon --watch src/main.js --exec electron ."
  }
}

3. 手动在main.js中写死开发服务器URL（比如http://localhost:5173），或者通过环境变量传递。

内容的提问来源于stack exchange，提问作者Rafa0712