SyntaxError：无法在模块外部使用导入语句 - vue electron builder plugin答案

【问题标题】：SyntaxError: Cannot use import statement outside a module - vue electron builder pluginSyntaxError：无法在模块外部使用导入语句 - vue electron builder plugin
【发布时间】：2021-03-16 15:19:17
【问题描述】：

我在使用 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 文件中，我的代码与电子生成器插件文档相同。该文件与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 import { ipcRenderer } from 'electron'; 但没有成功，或者如果我尝试使用预加载脚本方法window.ipcRenderer.send()，则以这种方式导入ipcRenderer

目前我不知道如何解决这个问题，我无法在电子主进程和 vue 之间发送消息。我该如何解决这个问题？

【问题讨论】：

标签： javascript vue.js webpack electron

【解决方案1】：

我遇到了同样的问题 - 似乎很难找到解决方法...我经历了非常相似的步骤

根本问题是 preload.js 没有被捆绑，因此丢失了。将它直接复制到 dist 目录显然不是一个很好的答案，并且正如您所发现的那样无论如何都不起作用（原因是您正在复制一个未处理的文件......）

您的vue.config.js 不正确。将预加载条目移到 builderOptions 元素之外。就这样……

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

如here所述

【讨论】：