Electron+Vue(JS)打包exe报cannot use import等模块错误如何解决

错误根本原因 #

你遇到的ERR_REQUIRE_ESM错误本质是两层规则冲突：

• 项目根目录package.json加了"type":"module"后，所有.js后缀文件默认被Node.js识别为ES模块，禁止用require加载
• Vue CLI Electron插件默认会把主进程代码编译为CommonJS格式，且Electron默认启动逻辑会用require加载配置的主进程入口文件，就触发了加载规则冲突

修复步骤 #

1. 调整主进程编译产物后缀
   在项目根目录的vue.config.js中添加如下配置，让主进程编译后输出.cjs后缀文件，.cjs后缀会被Node.js强制识别为CommonJS模块，不受根目录"type":"module"影响：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 你原有的其他vue配置保留
  pluginOptions: {
    electronBuilder: {
      // 此处替换为你自己的主进程源码路径
      mainProcessFile: 'src/background.js',
      chainWebpackMainProcess: config => {
        config.output.filename('background.cjs')
      }
    }
  }
})

2. 修正主入口配置
   修改package.json中的两个配置项，指向新的主进程产物路径：

• 顶层main字段改为："main": "dist_electron/background.cjs"
• 若你使用electron-builder，在build配置项下新增："main": "dist_electron/background.cjs"

3. 验证修复效果
   先执行npm run electron:serve验证开发环境可正常启动，再执行打包命令生成exe，运行后即可解决报错。

替代兜底方案（无需配置"type":"module"） #

如果你不想改动项目模块类型，也可以用动态导入兼容ES模块依赖，无需修改所有import语句：
主进程中所有纯ES模块的依赖都用import()动态加载：

// 原写法 import EsmOnlyPackage from 'esm-only-package'
async function loadEsmDependency() {
  const EsmOnlyPackage = await import('esm-only-package')
  // 后续业务逻辑
}

该方案不需要修改package.json的"type"字段，也能规避Vue的ESM相关BUG。

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