electron 打包vue项目错误

在使用 electron 打包 vue项目的时候, 打包报错, 初步判断是 动态资源问题, 但不清楚解决方案

打包后资源路径出现错误，导致找不到资源，尝试采用相对路径

electron , 我应该在很久之前写过相关的博客,可以去看下, 另外你这个问题 应该是路径有问题 去 渲染器进程 里面看下, 如有帮助给个采纳谢谢

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7601192
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：已有Vue项目使用electron打包流程
• 除此之外, 这篇博客: electron加载本地图片-打包处理字符集问题-vue项目改electron中的 打包处理字符集问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 
  修改这个文件

  • **/node_modules/app-builder-lib/out/targets/nsis/NsisTarget.js

    async executeMakensis(defines, commands, script) {
      const args = this.options.warningsAsErrors === false ? [] : ["-WX"];
      //添加这个
    args.push("-INPUTCHARSET", "UTF8");
      for (const name of Object.keys(defines)) {
        const value = defines[name];
  
        if (value == null) {
          args.push(`-D${name}`);
        } else {
          args.push(`-D${name}=${value}`);
        }
      }
  
      for (const name of Object.keys(commands)) {
        const value = commands[name];
  
        if (Array.isArray(value)) {
          for (const c of value) {
            args.push(`-X${name} ${c}`);
          }
        } else {
          args.push(`-X${name} ${value}`);
        }
      }
  
      args.push("-");
  
      if (this.packager.debugLogger.isEnabled) {
        this.packager.debugLogger.add("nsis.script", script);
      }
  
      const nsisPath = await (0, _nsisUtil().NSIS_PATH)();
      const command = path.join(nsisPath, process.platform === "darwin" ? "mac" : process.platform === "win32" ? "Bin" : "linux", process.platform === "win32" ? "makensis.exe" : "makensis"); // if (process.platform === "win32") {
      // fix for an issue caused by virus scanners, locking the file during write
      // https://github.com/electron-userland/electron-builder/issues/5005
  
      await ensureNotBusy(commands["OutFile"].replace(/"/g, "")); // }
  
      await (0, _builderUtil().spawnAndWrite)(command, args, script, {
        // we use NSIS_CONFIG_CONST_DATA_PATH=no to build makensis on Linux, but in any case it doesn't use stubs as MacOS/Windows version, so, we explicitly set NSISDIR
        env: { ...process.env,
          NSISDIR: nsisPath
        },
        cwd: _nsisUtil().nsisTemplatesDir
      });
    }
  

• 以下回答由chatgpt基于相关博客总结生成:

  问题标题: electron打包vue项目报错的解决方案是什么？

  解决方案： 1. 确保项目中的资源文件路径正确： 根据错误信息中可能是由于动态资源引起的，可以检查项目中的资源文件的路径是否正确，包括图片、样式文件、字体等。

  1. 调整图片大小和分辨率： 如果打包后发现窗口左上角的图标和任务栏图标显示不全，可能是图标图片太大或分辨率不合适导致的。可以使用图像编辑工具调整图标的大小和分辨率，一般应小于1M并且为256*256分辨率。

  2. 检查electron的api调用方式： 如果在vue中使用了electron的api，并且无法执行，需要在函数前面加上window才能运行。例如，可以在vue中对window解构，再使用const { require } = window来引用electron的require方法。

  3. 实现系统托盘和新消息闪动功能： 如果需要在vue+electron项目中实现系统托盘和新消息闪动功能，可以参考以下步骤：

  4. 在background.js文件中实现系统托盘功能，包括创建与图标相关的Tray对象、设置菜单和处理点击事件等。
  5. 在vue渲染进程中，通过ipcRenderer向主进程发送消息通知有新消息，触发系统托盘图标的闪动效果。可以在vue组件中监听按钮点击事件，并使用ipcRenderer.send('have-message')发送消息给主进程。

  以上是针对给出的问题和参考资料，给出的一些解决方案和建议。如果以上解决方案不能解决问题，可能需要更详细的错误信息和项目结构来做进一步的分析和排查。