使用Electron打包Vue项目为exe时模块相关报错如何解决

第一步：删除错误的配置项 #

删掉你package.json中手动添加的两行配置：

• "type":"module"
• "module":"es2015"
  你当前使用的Electron 13版本主进程默认采用CommonJS模块规范，添加上述配置会强制Node.js将所有.js文件识别为ES模块，和项目现有转译规则冲突，才会触发Must use import to load ES Module报错。

第二步：使用正确的打包命令 #

你已经安装了vue-cli-plugin-electron-builder插件，无需手动调用electron-packager执行打包，直接运行以下命令即可自动完成Vue项目编译+Electron打包全流程：

npm run electron:build

打包完成后生成的exe文件会输出在项目根目录的dist_electron文件夹下。

第三步：修复初始的Cannot use statement outside a module报错 #

如果删除配置后回到初始报错，检查项目根目录下的babel.config.js文件，确保配置如下即可，插件会自动处理主进程、渲染进程的ES语法转译：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

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