Electron 13.6.9 + Vue 实战：渲染进程直接调用 Dialog 模块全记录

最近在做 PC 桌面应用开发，技术栈选用了 Electron 搭配 Vue，项目搭建初期为了方便进程间交互，提前开启了 nodeIntegration:true 配置，原本想着能直接在 Vue 组件里调用 Electron 原生的 Dialog 模块，实现文件选择、弹窗提示等功能，实际开发中却发现没法直接调用，踩了不少进程模型相关的坑，这里把完整的实操过程、版本兼容细节以及最终实现方案整理成文，方便同版本技术栈的开发者参考。

一、核心前提：Electron Dialog 的进程限制

首先明确一个关键知识点，即便开启了 nodeIntegration，也不能在 Vue 渲染进程中直接 require('electron').dialog，核心原因在于 Electron 的进程分离机制：Dialog 属于 主进程模块 ，原生能力仅能在主进程中直接调用，渲染进程无法直接访问，必须通过中间模块做中转，这是整个问题的核心根源，也是前期踩坑的主要原因。 我的项目 Electron 版本固定为 13.6.9，这个版本属于较早期的稳定版，和高版本 Electron 在模块配置、API 支持上有明显差异，不能直接照搬高版本的配置方案，需要针对性适配模块版本和 webPreferences 参数。

二、初期方案：Remote 模块实现渲染进程直调

针对 Electron13.x 版本，想要在 Vue 组件里直接调用 Dialog，最便捷的方式就是使用 @electron/remote 模块，这个模块的作用是打通主进程和渲染进程的模块调用通道，让渲染进程可以间接调用主进程的原生模块，不用额外编写 IPC 通信逻辑，适合快速实现功能。

2.1 关键版本兼容匹配

这里有一个必须注意的细节：@electron/remote 版本和 Electron 版本强绑定，版本不匹配会直接导致模块加载失败、项目报错。针对我使用的 Electron13.6.9，经过实测和官方版本对应表核对， 唯一兼容的稳定版本为 2.0.1 ，高版本或低版本都会出现兼容性问题，安装时必须指定该版本，不能默认安装最新版。 对应安装命令：

# npm 安装指定兼容版本
npm install @electron/remote@2.0.1 --save

# yarn 安装
yarn add @electron/remote@2.0.1

2.2 主进程完整配置

Electron13.6.9 的 remote 模块需要手动初始化并启用，同时 webPreferences 里的几个核心参数必须严格配置，缺一不可，这是模块正常运行的关键。主进程（main.js/background.js）完整配置如下：

import { app, BrowserWindow } from 'electron'
import path from 'path'
// 引入 remote 主进程模块
import remoteMain from '@electron/remote/main'

// 初始化 remote 模块，Electron13 必须执行
remoteMain.initialize()

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 已开启的核心配置
      nodeIntegration: true,
      // 配合 remote 必须关闭，否则无法调用
      contextIsolation: false,
      // Electron13 需显式开启，高版本已废弃该配置
      enableRemoteModule: true,
      // 项目原有预加载脚本，保留即可
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 为当前窗口启用 remote 能力
  remoteMain.enable(mainWindow.webContents)

  // 开发环境加载 Vue 本地服务
  mainWindow.loadURL('http://localhost:8080')
  // 生产环境打包后加载本地文件
  // mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
}

// 应用启动逻辑
app.whenReady().then(() => {
  createWindow()
})

// 窗口关闭逻辑，适配多平台
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

2.3 Vue 组件内直接调用 Dialog

主进程配置完成、依赖安装到位后，就可以在任意 Vue 组件中，通过 window.require 引入 remote 模块，进而获取 dialog 对象实现调用，无需额外做进程通信，代码逻辑简洁直接，以下是文件选择对话框的实战示例：

<template>
  <div class="dialog-test">
    <button @click="openFileDialog">选择文件</button>
  </div>
</template>

<script>
export default {
  name: 'DialogTest',
  methods: {
    openFileDialog() {
      // 通过 remote 获取 dialog 模块
      const { dialog } = window.require('@electron/remote')
      // 调用文件选择对话框
      dialog.showOpenDialog({
        title: '请选择文件',
        // 配置选择属性：单选文件
        properties: ['openFile'],
        // 文件类型过滤
        filters: [
          { name: '文本文件', extensions: ['txt'] },
          { name: '所有文件', extensions: ['*'] }
        ]
      }).then(result => {
        // 处理选择结果，排除取消操作
        if (!result.canceled) {
          console.log('选中文件路径：', result.filePaths)
          // 后续业务逻辑处理
        }
      }).catch(err => {
        console.error('对话框调用失败：', err)
      })
    }
  }
}
</script>

三、备选规范方案：IPC 通信实现调用

除了 remote 模块直调，还有一种遵循 Electron 官方规范的实现方式，也就是主进程和渲染进程的 IPC 通信，这种方式完全遵循主进程处理原生能力、渲染进程负责页面渲染的原则，不用依赖 remote 模块，适合对项目规范性要求较高的场景。

3.1 主进程 IPC 监听配置

在主进程中直接引入 dialog 和 ipcMain，监听渲染进程发起的调用请求，处理完成后将结果返回给渲染进程，核心代码如下：

import { app, BrowserWindow, ipcMain, dialog } from 'electron'
import path from 'path'

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadURL('http://localhost:8080')
}

// 监听文件选择对话框请求
ipcMain.handle('show-open-dialog', async (event, options) => {
  // 主进程直接调用 dialog
  const result = await dialog.showOpenDialog(options)
  // 返回结果给渲染进程
  return result
})

// 监听保存对话框请求，可按需扩展
ipcMain.handle('show-save-dialog', async (event, options) => {
  const result = await dialog.showSaveDialog(options)
  return result
})

app.whenReady().then(() => {
  createWindow()
})

3.2 Vue 组件 IPC 调用

在 Vue 组件中，通过 ipcRenderer 向主进程发起调用请求，异步获取 dialog 处理结果，实现逻辑如下：

<template>
  <button @click="openDialogByIPC">IPC 方式选择文件</button>
</template>

<script>
export default {
  methods: {
    async openDialogByIPC() {
      // 获取渲染进程 IPC 模块
      const { ipcRenderer } = window.require('electron')
      try {
        // 向主进程发送调用请求，传递配置参数
        const res = await ipcRenderer.invoke('show-open-dialog', {
          title: 'IPC 文件选择',
          properties: ['openFile']
        })
        if (!res.canceled) {
          console.log('IPC 选中文件：', res.filePaths)
        }
      } catch (error) {
        console.error('IPC 调用异常：', error)
      }
    }
  }
}
</script>

四、Electron 13.6.9 专属注意事项

针对这个特定版本，有几个独有的配置要点，和高版本 Electron 差异明显，也是项目能否跑通的关键：

• 版本绑定 ：@electron/remote 必须锁定 2.0.1，其他版本均不兼容，切勿随意升级；
• 参数必填 ：webPreferences 中 enableRemoteModule:true 必须配置，高版本已移除该参数，此版本不可省略；
• 隔离关闭 ：contextIsolation 必须设为 false，配合 nodeIntegration 和 remote 模块才能正常生效；
• remote 初始化 ：主进程必须执行 remoteMain.initialize() 和 remoteMain.enable() 两步操作，缺一不可。

五、总结

Electron13.6.9+Vue 项目中，开启 nodeIntegration:true 后无法直接调用 Dialog，核心是主进程与渲染进程的模块隔离机制。快速实现可选用 @electron/remote@2.0.1 模块，做好专属配置后即可在 Vue 组件直调；追求项目规范可采用 IPC 通信方式，两种方案均适配该版本，实际开发中可根据项目需求选择。整个过程的核心难点在于版本兼容和专属参数配置，严格按照版本对应关系和参数要求设置，就能顺利实现渲染进程调用 Dialog 原生模块的需求。