Блог

Как мне получить доступ к основному модулю electron process fs из модуля на стороне рендеринга, такого как компонент vue, работающий в рамках Quasar Framework.

Я попробовал несколько вариантов компонента со следующей ошибкой:

 const { app } = require('electron')
  

vue-router.esm.js?8c4f: 1897 Ошибка типа: fs.existsSync не является функцией

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

Ошибка типа: window.require не является функцией

Посмотрев на то, что я смог найти через моего друга Google, я все еще ищу ответ о том, как получить доступ к функциям основного процесса electron из компонента vue, работающего в рамках quasar framework. Кто-нибудь… кто-нибудь? Я видел несколько примеров файловых обозревателей на github, но, основываясь на документации electron, кажется, что реализация простого вызова чего-то вроде fs.readdirSync() должна быть намного проще, чем то, что я вижу в этих реализациях.

Ваша проблема объясняется в документах Quasar

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

Предложение Quasar заключается в использовании сценария предварительной загрузки для подключения API-интерфейсов узлов, которые вы хотите использовать в своих процессах визуализации (т. Е. BrowserWindows), к глобальному объекту window.

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')
  }
})
  

2. Присоедините API узлов к window global (сценарий предварительной загрузки)

src-electron/electron-preload.js:

 window.electron = require('electron')
  

3. Используйте Node API через window global (процесс визуализации)

somefile.vue

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

Ответ был просто за пределами моего понимания того, как все эти компоненты работают вместе. Надеюсь, это поможет кому-то еще, кто только набирает скорость в разработке приложения Quasar / Vue / Electron. Если вы запускаете свое приложение / веб-сайт с помощью

 quasar dev
  

вы получаете браузер (средство визуализации), который взаимодействует с основным процессом electron, который не может обрабатывать такие вещи, как:

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

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

• Я не смог найти четкий, краткий и простой способ. Похоже, что существует конфигурация webpack, которая может обеспечить такую же «глубокую» интеграцию, но я искал более готовое решение.

Если вы запустите свое приложение

 quasar dev -m electron
  

Вы получаете глубокую интеграцию и теперь можете ‘require ()’ или импортировать вышеуказанные модули в компоненты Vue в вашем приложении Quasar.

 const electron = require('electron')