Electron编译Vue.js应用后运行报错：SyntaxError:模块外不能用import

核心原因 #

即使把background.js改成require语法仍报错，大概率是以下情况之一：

1. 项目根目录package.json配置了"type": "module"，强制整个项目使用ES模块规范，导致CommonJS语法（require）不兼容，或编译后主进程文件仍残留import语句。
2. Vue的Electron编译插件（如vue-cli-plugin-electron-builder）未正确将主进程代码转译为Electron支持的CommonJS格式。
3. 主进程相关的其他文件（如预加载脚本preload.js）仍使用import语法未修改。

具体解决步骤 #

1. 检查并调整package.json的模块规范配置 #

打开项目根目录的package.json：

• 如果存在"type": "module"字段，直接删除它（Node.js默认使用CommonJS规范，Electron主进程原生支持CommonJS）。
• 确认main字段指向正确的编译后主进程文件，比如：

  "main": "dist_electron/main/background.js"
  

2. 检查编译后主进程文件是否残留import语句 #

找到编译产物目录（通常是dist_electron/main），打开里面的background.js：

• 如果搜索到import关键字，说明编译过程未处理主进程的ES模块语法，需要在vue.config.js中添加主进程的Webpack配置：

  module.exports = {
    pluginOptions: {
      electronBuilder: {
        mainProcessWebpackConfig: {
          target: 'electron-main',
          module: {
            rules: [
              {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
  

  配置后重新编译，确保主进程代码被转译为CommonJS格式。

3. 检查所有主进程相关文件的语法 #

除了background.js，还要检查预加载脚本（如preload.js）等主进程加载的文件：

• 确保所有文件统一使用require语法；如果坚持用ES模块，需要：
  • 保留package.json的"type": "module"字段。
  • 将主进程文件后缀改为.mjs（如background.mjs），并更新package.json的main字段指向该文件。
  • 确保Electron版本≥12（原生支持ES模块）。

4. 清除缓存重新编译 #

执行以下命令清除编译缓存，避免旧产物干扰：

rm -rf node_modules/.cache
npm run electron:build

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