Electron开启contextIsolation后白屏，关闭后模块未定义求解

问题根源 #

• 当contextIsolation: true时，渲染进程与主进程处于上下文隔离状态，渲染进程无法直接调用Node.js的require方法，你的index.js中直接require('jquery')、require('sqlite3')会触发JS错误，导致页面白屏（可通过开发者工具控制台查看具体报错）。
• 当contextIsolation: false时，虽然渲染进程能访问Node.js API，但存在两个问题：一是违背Electron安全最佳实践，二是像sqlite3这类二进制模块在打包后可能因编译版本不匹配、路径问题导致加载失败，jquery作为Node模块引入时也会在浏览器环境下出现兼容性问题，最终提示模块未定义。

正确解决方案：使用预加载脚本（Preload） #

保持contextIsolation: true，通过预加载脚本+contextBridge向渲染进程安全暴露必要的Node.js API，前端库（如jQuery）改用浏览器端方式引入。

1. 创建预加载脚本preload.js

const { contextBridge } = require('electron');
const mysql = require('mysql');
const sqlite3 = require('sqlite3');
require('dotenv').config();

// 通过contextBridge向渲染进程暴露封装后的API
contextBridge.exposeInMainWorld('electronAPI', {
  // 封装sqlite3查询方法（建议不要直接暴露整个模块，按需封装更安全）
  querySqlite: (dbPath, sql) => {
    return new Promise((resolve, reject) => {
      const db = new sqlite3.Database(dbPath, (err) => {
        if (err) reject(err);
      });
      db.all(sql, (err, rows) => {
        if (err) reject(err);
        resolve(rows);
        db.close();
      });
    });
  },
  // 暴露mysql连接能力
  createMysqlConn: (config) => {
    return mysql.createConnection(config);
  },
  // 暴露环境变量（按需）
  env: {
    DB_HOST: process.env.DB_HOST,
    DB_USER: process.env.DB_USER
  }
});

2. 修改main.js的webPreferences配置

开启预加载脚本，同时关闭不安全的nodeIntegration和enableRemoteModule（enableRemoteModule已废弃）：

window = new BrowserWindow({
  width,
  height,
  minWidth:970,
  minHeight:390,
  icon: 'icon.png',
  webPreferences: {
    nodeIntegration: false,
    enableRemoteModule: false,
    contextIsolation: true,
    webSecurity: false,
    preload: path.join(__dirname, 'preload.js') // 指定预加载脚本路径
  }
})

3. 修改index.html引入jQuery

改用浏览器端方式引入jQuery，不要通过Node.js的require：

<body class="container">
  <div class="topnav" id="myTopnav">
    <a id="name">MyApp</a>
    <a href='index.html'>Home</a>
    <a href='get.html'>Live TV</a>
    <a href='post.html'>Movies</a>
    <a href='inline.html'>Series</a>
  </div>
  <!-- 先引入jQuery，再引入业务脚本 -->
  <script src="../js/jquery.min.js"></script> <!-- 本地文件或CDN链接 -->
  <script src="../js/index.js"></script>
</body>

4. 修改index.js使用暴露的API

不再直接requireNode模块，通过window.electronAPI调用预加载脚本暴露的能力：

// jQuery已通过script标签引入，直接使用$即可
$(document).ready(() => {
  console.log('jQuery加载完成');
});

// 使用sqlite3查询示例
window.electronAPI.querySqlite('./database.db', 'SELECT * FROM users')
  .then(rows => console.log('查询结果:', rows))
  .catch(err => console.error('查询失败:', err));

// 使用mysql连接示例
const conn = window.electronAPI.createMysqlConn({
  host: window.electronAPI.env.DB_HOST,
  user: window.electronAPI.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME
});

conn.connect(err => {
  if (err) throw err;
  console.log('MySQL连接成功');
});

打包注意事项 #

对于sqlite3这类二进制模块，打包前需要用electron-rebuild重新编译，确保适配当前Electron版本：

# 安装electron-rebuild
npm install --save-dev electron-rebuild
# 执行重建命令
npx electron-rebuild

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