不用装全局！npx 启动 Electron + Vue 热加载（3 步搞定）

要将 npx electron . 与 Vue 热加载结合，需通过 vue-cli-plugin-electron-builder 或 Vite 配置实现开发环境的热更新，同时保留 npx 轻量化启动特性。以下是两种主流方案：

方案 1：基于 Vue CLI + npx 实现热加载

适合 Vue 2/3 项目，利用 Vue CLI 插件集成 Electron 并开启热更新：

步骤 1：创建 Vue 项目并集成 Electron

bash

# 1. 创建 Vue 项目（已有的话可跳过）
npx @vue/cli create vue-electron-demo
cd vue-electron-demo

# 2. 安装 Electron 集成插件
npx vue add electron-builder

步骤 2：修改配置支持热加载

插件会自动配置热更新，核心逻辑在 vue.config.js 中（默认已开启）：

javascript

运行

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      // 开发模式下默认开启热加载
      hotReload: true, 
      // 主进程文件变更时重启（可选）
      mainProcessWatch: ['src/background.js']
    }
  }
};

步骤 3：用 npx 启动（带热加载）

bash

# 启动开发服务器（自动开启热加载）
npx vue-cli-service electron:serve

• 效果：修改 Vue 组件（src/components/）会实时更新界面，无需手动刷新；
• 原理：插件通过 webpack-dev-server 实现 Vue 热模块替换（HMR），同时保持 Electron 窗口与开发服务器同步。

方案 2：基于 Vite + npx 实现热加载（推荐 Vue 3）

Vite 热更新速度更快，适合现代 Vue 3 项目：

步骤 1：创建 Vite + Vue 项目

bash

# 创建 Vite 项目
npx create-vite@latest vue-electron-vite --template vue
cd vue-electron-vite
npm install

步骤 2：安装 Electron 相关依赖

bash

npm install electron electron-builder vite-plugin-electron --save-dev

步骤 3：配置 Vite 热加载

创建 / 修改 vite.config.js：

javascript

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

export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: 'electron/main.js', // 主进程入口
      // 开发模式配置（热加载核心）
      development: {
        hotReload: true, // 开启热加载
        // 主进程文件变更时自动重启
        watch: ['electron/main.js']
      }
    })
  ],
  server: {
    port: 3000, // 确保与Electron加载的端口一致
    strictPort: true
  }
});

步骤 4：创建 Electron 主进程文件

新建 electron/main.js：

javascript

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

let mainWindow;
app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true
    }
  });

  // 开发环境加载 Vite 热更新服务器
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000'); // 与Vite端口一致
    mainWindow.webContents.openDevTools();
  } else {
    // 生产环境加载打包后的文件
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
  }
});

步骤 5：用 npx 启动（带热加载）

在 package.json 中添加脚本：

json

{
  "scripts": {
    "dev": "npx vite dev" // 启动Vite开发服务器（自动触发Electron）
  }
}

运行命令：

bash

npm run dev

• 效果：修改 Vue 组件（src/ 下）会立即热更新，主进程文件（electron/main.js）变更会自动重启 Electron。

核心原理：热加载如何工作？

1. 渲染进程热更新：Vue 代码通过 Webpack/Vite 的开发服务器运行，修改后通过 HMR（热模块替换）更新界面，无需刷新窗口。

2. 主进程热重启：工具监听主进程文件（如 main.js），变更时自动重启 Electron 进程，保持开发状态同步。

关键注意事项

1. npx 缓存问题：首次运行可能因下载依赖较慢，可通过指定版本加速：

   bash

   npx vue-cli-service@latest electron:serve  # Vue CLI 方案
   npx vite@latest dev                       # Vite 方案
   

2. 端口冲突：确保 Vue 开发服务器端口（默认 8080/Vite 3000）未被占用，否则热加载会失效。

3. 生产环境区分：热加载仅在开发模式生效，打包生产版本需用：

   bash

   npx vue-cli-service electron:build  # Vue CLI
   npx vite build && npx electron-builder  # Vite
   

两种方案都能完美结合 npx 的轻量化启动与 Vue 的热加载特性，推荐优先选择 Vite 方案（热更新速度更快，适合 Vue 3）