Vue Electron项目多平台打包出现Electron导入语法错误如何解决？

你遇到的Syntax Error: import {app, protocol, BrowserWindow} from 'electron'报错，是Node.js/Electron环境未识别ES模块语法导致的，可按以下步骤排查修复：

• 方案1：修改模块引入语法
  如果你没有强制使用ES模块的需求，直接把主进程里的ES模块import写法替换为CommonJS写法即可：

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

• 方案2：开启ES模块支持
  如果你要使用ES模块语法，在项目根目录package.json中新增配置项"type": "module"，同时确认你的Electron版本 ≥14，低版本Electron对ES模块支持存在兼容问题。
• 方案3：检查打包工具配置
  如果你使用的是vue-cli-plugin-electron-builder：
  确认vue.config.js中主进程配置正确，主进程文件没有被排除在babel转译范围外，示例配置参考：

  module.exports = {
    pluginOptions: {
      electronBuilder: {
        mainProcessFile: 'src/background.js',
        mainProcessWatch: ['src/background.js'],
      }
    }
  }
  

  如果你使用的是Vite + vite-plugin-electron：
  确认vite.config.js中electron插件已正确配置主进程入口，且没有把electron加入external排除列表。
• 方案4：排查引入位置错误
  不要在渲染进程的前端业务代码中直接引入electron主进程模块，主进程模块只能在主进程入口文件中引入，渲染进程需要调用相关能力必须通过IPC通信实现。

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