Electron Forge+Vue3+Vite项目配置Vue DevTools插件失败，修改vite.renderer.config.mjs后启动卡住

我之前在搭建Electron Forge + Vue3 + Vite项目时也碰到过类似的问题，先帮你梳理下场景和可行的解决思路：

问题场景还原 #

• 按照官方集成指南完成了index.html、src/App.vue、src/renderer.js的修改，npm run start能正常启动应用，但无法打开Vue DevTools
• 尝试修改vite.renderer.config.mjs来配置DevTools后，启动流程卡在「compiling main process code」步骤，无任何报错或警告输出

可行解决思路 #

1. 换一种方式安装Vue DevTools（更可靠）

其实不需要修改Vite渲染进程的配置，直接在Electron主进程中手动安装DevTools是更稳妥的方案：

• 首先安装依赖包：

  npm install electron-devtools-installer --save-dev
  

• 然后在主进程文件（比如src/main.js）中添加安装逻辑：

  import { app, BrowserWindow } from 'electron';
  import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer';
  
  function createWindow() {
    // 你的窗口创建逻辑...
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false // 根据你的项目实际需求调整
      }
    });
  
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  }
  
  app.whenReady().then(async () => {
    // 安装Vue3 DevTools
    try {
      const extension = await installExtension(VUEJS3_DEVTOOLS);
      console.log(`已安装Vue DevTools: ${extension.name}`);
    } catch (err) {
      console.error('Vue DevTools安装失败:', err);
    }
    createWindow();
  });
  

• 配置完成后重新启动应用，就能正常打开Vue DevTools，且不会影响编译流程

2. 排查vite.renderer.config.mjs的错误配置

如果一定要通过Vite配置实现，建议先把修改的内容还原，然后逐步添加配置项，每次启动验证是否正常，定位导致卡住的具体代码：

• 常见的坑：错误设置build.outDir与Electron Forge默认输出目录冲突，或者添加了不兼容的Vite插件
• 确保Vite渲染进程配置只针对渲染进程，不要混入主进程的配置逻辑

3. 清理缓存重试

有时候项目缓存会导致奇怪的编译阻塞，尝试以下步骤清理：

# 清理Electron Forge的构建缓存
npm run clean
# 删除依赖和锁文件
rm -rf node_modules
rm package-lock.json
# 重新安装依赖
npm install

之后再执行npm run start，看是否能正常启动

4. 查看详细调试日志

如果还是卡住，开启调试日志来定位问题：

DEBUG=electron-forge:* npm run start

日志会输出Electron Forge编译过程的详细步骤，你可以从中找到卡在哪个环节，进而针对性解决

备注：内容来源于stack exchange，提问作者Karthik Sankaran