在类星体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可以找到的内容后，我仍在寻找关于如何从在准星框架下运行的vue组件中访问电子主过程功能的答案。有人...有人吗？我已经看到了一些文件浏览器的github示例，但是根据电子文档，似乎仅调用fs.readdirSync（）之类的实现应该比我在这些实现中看到的简单得多。

Answer 1

const electron = require('electron')

Answer 2

答案超出了我对所有这些组件如何协同工作的理解。希望这将帮助其他刚开始开发Quasar / Vue / Electron应用程序的人。如果您使用以下方式启动应用程序/网站

quasar dev

您将获得一个与主电子过程通信的浏览器（渲染器），该电子过程无法处理节点主过程，例如：

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

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

• 我找不到清晰，简洁和简单的方法。似乎有一个webpack配置可以提供相同的“深度”集成，但我一直在寻找更多的即用型解决方案。

如果您启动应用程序

quasar dev -m electron

您已经进行了深度集成，现在可以在Quasar应用程序的Vue组件中“ require（）”或将上述模块导入。

Answer 3

Quasar文档中说明了您的问题

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

Quasar的建议是使用预加载脚本将渲染器进程（例如，BrowserWindows）中所需的节点API附加到全局窗口对象。

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

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

src-electron / electron-main.js：

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

1. 将节点API附加到全局窗口（预加载脚本）

src-electron / electron-preload.js：

window.electron = require('electron')

1. 通过全局窗口（渲染过程）使用Node API

somefile.vue

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