使用 Vite/Vue ES6 导入电子模块失败

Question

我正在尝试将 Electron 与最新的 Vite 2/Vue 3 一起使用。我设置了 Electron 主文件的两个版本，以便我可以测试并使用开发服务器和构建：

• dev 版本使用 loadURL 加载 localhost:3000 （来自npm run dev）
• 另一个版本使用 loadFile从dist文件夹加载构建版本（来自npm run build）

我已经在新的 BrowserWindow 选项中设置：

webPreferences: {
   nodeIntegration: true,
   contextIsolation: false,
   enableRemoteModule: true,
   preload: path.join(app.getAppPath(), 'electron.preload.js')
}

该应用程序在 Electron 中的开发版本和构建版本中启动都很好，加载所有资产并且没有任何安全错误。但是，当我尝试从项目中的“电子”导入任何模块时，例如：

import electron from 'electron';

我收到错误：

Uncaught TypeError: path.join is not a function
    at node_modules/electron/index.js (index.js:4)

我尝试检查path和__dirname，看看它们是否在我的项目中工作：

import * as path from 'path';

console.log(path);
console.log(path.join);
console.log(__dirname);

这些确实在 Electron 开发面板中追踪出以下内容：

如果我尝试以不同方式导入路径：

import path from 'path'
console.log(path);
console.log(path.join);

我得到以下结果：

无论如何，path.join都是未定义的。现在我几乎不知道如何继续下去。

我还可以补充说我想使用 fs-extra，但这也失败了：

import fs from 'fs-extra';

[编辑：在 webPreferences 中添加预加载]

Answer 1

我相信 Vite 在幕后改变了很多事情。值得庆幸的是，@electron/remote提供了另一种获取内容的方法：

electron.js：

const { app, BrowserWindow } = require("electron");
const Remote = require("@electron/remote/main");

Remote.initialize();

// ...

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
    },
  });

  Remote.enable(mainWindow.webContents);

  mainWindow.loadFile(path.resolve("./dist", "index.html"));
});

// ...

Component.tsx：

import type { BrowserWindow } from "electron";


const Component: React.FC = () => {
  const app = window.require("@electron/remote");
  const win: BrowserWindow = app.getCurrentWindow();

  // ...
}

不确定这是否是最好的解决方案，但它对我来说适用于 Vite + Electron + React。