javascript - 语法错误: Cannot use import statement outside a module - vue electron builder plugin

Question

我在使用vue-cli-electron-builder插件时遇到了一些麻烦。我正在尝试按照文档中所述使用nodeIntegration，但是将其设置为true不会使我能够在自己的vue组件中使用ipcRenderer。为了尝试解决该问题，我尝试遵循预加载脚本的方式，但是也没有成功。由于在运行npm run electron:serve命令时，复制Webpack插件不会复制preload.js文件，因此我已在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 生成器插件文档相同的代码。该文件与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组件中，如果我使用nodeIntegration ipcRenderer，则以这种方式导入import { ipcRenderer } from 'electron';，但没有成功；如果尝试使用预加载脚本方法window.ipcRenderer.send()，则以这种方式导入
目前，我不知道如何解决此问题，并且无法在 Electron 主过程和Vue之间发送消息。我该如何解决？

Answer 1

我遇到了同样的问题-似乎很难找到解决方法...我经历了非常相似的步骤
根本问题是preload.js没有被 bundle ，因此丢失了。将其直接复制到dist目录显然不是一个好办法，而且您发现它仍然无法正常工作(其原因是您正在复制未处理的文件...)
您的vue.config.js不正确。将预加载条目移至builderOptions元素之外。像这样...

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

如here所述