如何在Electron开发环境加载Vue Devtools并规避生产环境报错

你可以通过环境变量判断+动态/运行时加载的方式，避免生产环境因依赖缺失报错，具体有两种可靠方案：

方案1：ES模块动态导入（推荐） #

利用ES模块的import()语法，仅在开发环境下加载electron-devtools-installer模块，生产环境不会触发该导入逻辑：

import { app } from 'electron';

app.whenReady().then(async () => {
  // 仅在开发环境执行Devtools安装逻辑
  if (process.env.NODE_ENV === 'development') {
    try {
      // 动态导入开发依赖包
      const { default: installExtension } = await import('electron-devtools-installer');
      const VUEJS3_DEVTOOLS = 'nhdogjmejiglipccpnnnanhbledajbpd';
      const extensionName = await installExtension(VUEJS3_DEVTOOLS);
      console.log(`Added Extension: ${extensionName}`);
    } catch (err) {
      console.error('Failed to install Vue Devtools:', err);
    }
  }

  // 此处添加应用核心初始化逻辑（生产/开发环境通用）
});

关键说明： #

• 确保你的构建工具（Vite、Webpack等）已正确设置NODE_ENV：开发模式下为development，生产打包时自动设为production
• 动态导入是运行时触发，生产环境打包时不会将electron-devtools-installer纳入最终产物

方案2：CommonJS require条件加载 #

如果你的Electron主进程使用CommonJS规范，可通过require条件加载：

const { app } = require('electron');

let installExtension;
// 仅在开发环境加载依赖
if (process.env.NODE_ENV === 'development') {
  installExtension = require('electron-devtools-installer').default;
}

app.whenReady().then(() => {
  if (installExtension) {
    const VUEJS3_DEVTOOLS = 'nhdogjmejiglipccpnnnanhbledajbpd';
    installExtension(VUEJS3_DEVTOOLS)
      .then(name => console.log(`Added Extension: ${name}`))
      .catch(err => console.error('Devtools install error:', err));
  }

  // 应用核心初始化逻辑
});

额外注意事项： #

• 确认electron-devtools-installer已被添加到devDependencies（而非dependencies），这样生产打包工具（如electron-builder）会自动忽略该依赖
• 若使用Electron Forge或其他脚手架，通常已默认配置好环境变量，无需额外手动设置

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