Electron 19.1.5升20.0.0后Vue加载失败：变更原因及sandbox兼容方案

Electron 20.0.0版本后，在保持默认sandbox: true的情况下，渲染进程中执行import Vue from 'vue'时出现错误：Uncaught (in promise) Error: module not found: ./maplist（maplist为当前执行的脚本文件名）。该代码在Electron 19.1.5及之前版本运行正常。

环境版本 #

• Electron：19.1.5 / 20.0.0
• Vue：2.6.14
• electron-builder：23.6.0
• vue-loader：15.9.8
• vue-template-compiler：2.6.14
• vue-context-menu：2.0.6
• 未使用vue-electron类解决方案

临时解决方法 #

在主进程的窗口配置中关闭沙箱可暂时恢复正常：

mainWindow = new BrowserWindow({
  width: appWidth,
  height: appHeight,
  webPreferences: {
    preload: path.join(__dirname, '../../frontend/api/preload.js'),
    sandbox: false // 关闭沙箱
  }
});

保持沙箱开启的解决方案 #

Electron 20默认开启渲染进程沙箱，沙箱环境对Node.js模块加载机制有严格限制，导致Vue的CommonJS模块加载出现异常。可通过以下方式修复：

1. 优先加载Vue的ES模块版本 #

修改打包工具（如webpack）的配置，让其优先加载Vue的ES模块版本，而非CommonJS版本：

// webpack.config.js
module.exports = {
  resolve: {
    mainFields: ['module', 'main']
  }
};

Vue 2.6.14的npm包中包含ES模块版本（vue.esm.js），沙箱环境对ES模块的兼容性更好。

2. 调整渲染进程与主进程的交互逻辑 #

沙箱环境下渲染进程无法直接访问Node.js API，所有需要Node.js能力的操作都应放在预加载脚本中，通过contextBridge暴露给渲染进程：

// preload.js
const { contextBridge } = require('electron');

// 仅暴露渲染进程需要的API，避免全局污染
contextBridge.exposeInMainWorld('electronAPI', {
  // 示例：暴露需要的方法
  getAppVersion: () => app.getVersion()
});

渲染进程中仅通过window.electronAPI调用预加载脚本暴露的接口，避免在渲染进程中引入依赖Node.js的模块。

3. 检查打包配置，禁用Node.js内置模块模拟 #

沙箱环境下渲染进程无法访问Node.js内置模块，需确保打包工具没有自动模拟这些模块：

// webpack.config.js
module.exports = {
  node: {
    // 禁用所有Node.js内置模块的模拟
    fs: 'empty',
    path: 'empty',
    // 其他内置模块同理
  }
};

同时确保Electron的webPreferences中nodeIntegration: false（默认已为false），避免渲染进程访问Node.js环境。

4. 备选方案：使用Vue的UMD版本 #

如果上述方法仍有问题，可以直接在HTML中引入Vue的UMD版本，或者在渲染进程中通过import引入UMD模块：

<!-- 在HTML中引入 -->
<script src="./node_modules/vue/dist/vue.js"></script>

这种方式不需要依赖模块加载器，沙箱环境下兼容性更强，但需注意全局变量的使用规范。

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