Electron 构建器和资产文件

Ant*_*Ant 2 fs electron electron-builder

我在 macOS 上构建分发电子应用程序时遇到问题。

我的项目根目录中有一些文件夹,位于我的项目旁边index.js,我需要将其包含在我的打包应用程序中。

在尝试对 中的每个文件进行硬编码之后package.json,这没有帮助,我最终得到了以下块

    "extraResources": [
      {
        "from": "files/",
        "to": "files/",
        "filter": [
          "**/*"
        ]
      },
      {
        "from": "assets/",
        "to": "assets/",
        "filter": [
          "**/*"
        ]
      },
      {
        "from": "accounts/",
        "to": "accounts/",
        "filter": [
          "**/*"
        ]
      }
    ]
Run Code Online (Sandbox Code Playgroud)

如果我运行 .app,似乎这些文件不存在。打开内容/资源,我看到它们在那里,所以,闲逛时我发现该应用程序正在查看app.asar,但显然文件不在容器内。

'..'我发现了一个小技巧,在我所有的路径前面添加了几个,所以它超出了app.asar,所以它超出了容器的范围,但我真的认为这对于解决我的问题有点愚蠢。

另外,我计划为多个平台构建这个,我有一种感觉,如果我用这种黑客方式来修复它,我将不得不为每个平台创建一个黑客,我宁愿不这样做......

Tob*_*ias 6

如果您有在 html 中使用的文件(在我的示例中为 asset/css 等),或者在任何文件中需要并具有这样的文件夹结构,则这些文件夹将自动位于 asar 中。

注意:asar 是只读包,创建此文件后无法添加、删除或编辑文件。
在此输入图像描述

assets/css 文件夹中的 css 文件的使用很简单: 在此输入图像描述 使用 html 文件中的相对路径,它适用于所有平台。

如果您有与您的项目无关的文件,或者未在您的项目中使用但应该在打包的应用程序中可用的文件:

您必须在 package.json 中使用“extraFiles” 在 Mac OS 上,extraFiles 会将文件复制到应用程序内容目录,在 Windows 和 Linux 上,它会将文件复制到应用程序根目录。如果您使用 extraResources,它会将文件复制到 Mac 上的 Contents/Resources,而在 Windows 上,它会将文件复制到 resources 文件夹。

"extraFiles": [
  "files",
  "assets",
  "accounts"
]
Run Code Online (Sandbox Code Playgroud)

注意:空文件夹不会被复制

在您的应用程序中使用类似此模块的内容来获取应用程序的根路径,并使用此路径的文件

替代方案:使用process.execPath并替换您的可执行文件名称以获得正确的路径

根据您的评论:
如果您必须在应用程序 html 中加载此文件(css/js),您可以使用我上面为您提供的解决方案在 onload 事件上动态加载。