如何在 quasar vue 组件环境中使用 require('electron')？

Question

如何从渲染器端模块（如 Quasar 框架内的 vue 组件运行）访问主电子进程 fs 模块。

我在一个组件中尝试了一些变体，但出现以下错误：

const { app } = require('electron')

vue-router.esm.js?8c4f:1897 TypeError: fs.existsSync 不是函数

const { app } = window.require('electron')

TypeError: window.require 不是函数

通过我的朋友 Google 查看了我可以找到的内容后，我仍在寻找有关如何从 quasar 下的 vue 组件运行中访问电子主进程函数的答案框架。有人……有人吗？我看过一些文件浏览器的 github 示例，但是根据电子文档，似乎只是简单地调用 fs.readdirSync() 之类的东西的实现应该比我在中看到的要简单得多那些实现。

Answer 1

const electron = require('electron')

Answer 2

答案超出了我对所有这些组件如何协同工作的理解。希望这会帮助其他人加快开发 Quasar/Vue/Electron 应用程序的速度。如果您使用

启动 app/website

quasar dev

你得到一个与主电子进程通信的浏览器（渲染器），它不能处理节点主进程的东西，比如：

const electron = require('electron')
const fs = require('fs')

const files = fs.readdirSync('/')
console.log(files)

我找不到清晰、简洁和简单的方法。似乎有一个 webpack 配置可以提供相同的 'deep' 集成，但我一直在寻找更开箱即用的解决方案。

如果您启动应用

quasar dev -m electron

您获得深度集成，现在可以'require()'或在您的 Quasar 应用的 Vue 组件中导入上述模块。

Answer 3

Quasar 文档中解释了您的问题

https://quasar.dev/quasar-cli/developing-electron-apps/node-integration

Quasar 的建议是使用预加载脚本将您想要在渲染器进程（即：BrowserWindows）中的节点 API 附加到全局 window 对象。

https://quasar.dev/quasar-cli/developing-electron-apps/electron-preload-script

将预加载脚本附加到 BrowserWindow（主进程）

src-electron/electron-main.js:

import path from 'path'
win = new BrowserWindow({
  ...
  webPreferences: {
    preload: path.resolve(__dirname, 'electron-preload.js')
  }
})

将节点 APIs 附加到 window 全局（预加载脚本）

src-electron/electron-preload.js:

window.electron = require('electron')

通过window全局（渲染器进程）

somefile.vue

window.electron.ipcRenderer.sendSync(
   'message',
   payload
)

如何在 quasar vue 组件环境中使用 require('electron')？

How do I use require('electron') in a quasar vue component environment?

vue.js

quasar

electron