Блог

У меня возникли некоторые проблемы с плагином vue-cli-electron-builder. Я пытаюсь использовать nodeIntegration , как описано в документации, но установка для него значения true не даст мне возможности использовать ipcRenderer в моих компонентах vue. Чтобы попытаться устранить проблему, я попытался следовать сценарию предварительной загрузки, но также безуспешно. Поскольку плагин copy webpack не будет копировать preload.js файл когда npm run electron:serve выполняется команда, я скопировал файл вручную внутри dist_electron папки, но я получаю эту ошибку в консоли при открытии приложения

 electron/js2c/renderer_init.js:91 Unable to load preload script: /Users/me/Sites/electron-app-demo/desktop-app/dist_electron/preload.js


(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import { ipcRenderer } from 'electron';
                                                                                                                                                           ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:88:7)
    at createScript (vm.js:261:10)
    at Object.runInThisContext (vm.js:309:10)
    at wrapSafe (internal/modules/cjs/loader.js:1047:15)
    at Module._compile (internal/modules/cjs/loader.js:1108:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
    at Module.load (internal/modules/cjs/loader.js:992:32)
    at Module._load (internal/modules/cjs/loader.js:885:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12694)
    at Object.<anonymous> (electron/js2c/renderer_init.js:91:3099)
 

Внутри preload.js файла у меня есть этот код, который совпадает с документацией плагина electron builder. Файл находится в той же папке background.js , что и файл

 import { ipcRenderer } from 'electron';
window.ipcRenderer = ipcRenderer;
 

И в моем vue.config.js файле у меня есть этот код. Файл помещается за пределы папки src

 const copyPlugin = require('copy-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new copyPlugin([
        { from: 'src/preload.js', to: 'dist_electron/preload.js' }
      ])
    ]
  },
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        //nodeIntegration: true,
        preload: 'src/preload.js'
      }
    }
  }
}
 

В моем компоненте vue я импортирую ipcRenderer таким образом, если я использую nodeIntegration import { ipcRenderer } from 'electron'; , но безуспешно, или таким образом, если я пытаюсь использовать метод предварительной загрузки скрипта window.ipcRenderer.send()

На данный момент я понятия не имею, как решить эту проблему, и я не могу отправлять сообщения между основным процессом electron и vue. Как я могу это исправить?

У меня была такая же проблема, и, кажется, невероятно сложно выяснить, как ее решить… Я прошел через очень похожие шаги

Основная проблема заключается в том, что preload.js не входит в комплект поставки и, следовательно, отсутствует. Копирование его непосредственно в каталог dist явно не является хорошим ответом, и, как вы обнаружили, все равно не работает (причина этого в том, что вы копируете необработанный файл …)

Ваш vue.config.js неверный. Переместите запись предварительной загрузки за пределы элемента builderOptions. Вот так …

 module.exports = {
    pluginOptions: {
        electronBuilder: {
            preload: 'src/preload.js',
 

как описано здесь