电子生成器和资产文件

Question

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

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

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

    "extraResources": [
      {
        "from": "files/",
        "to": "files/",
        "filter": [
          "**/*"
        ]
      },
      {
        "from": "assets/",
        "to": "assets/",
        "filter": [
          "**/*"
        ]
      },
      {
        "from": "accounts/",
        "to": "accounts/",
        "filter": [
          "**/*"
        ]
      }
    ]

如果我运行 .app 文件似乎不存在。打开 Contents/Resources，我看到它们在那里，所以，四处游玩，我发现该应用程序正在查看 app.asar 容器内部，显然文件不在其中。

我通过在所有路径前添加几个 '..' 找到了一个小 hack，所以它超出了 app.asar 容器，但我真的认为这有点愚蠢解决我的问题。

另外，我计划为多个平台构建它，我觉得如果我用这种 hacky 的方式修复它，我将不得不为每个平台创建一个 hack，我宁愿这样做不做...

Answer 1

如果您有在 html 中使用的文件（在我的示例 assets/css 等中），或者在任何文件中需要并且具有这样的文件夹结构，则文件夹将是自动在asar.

节点：asar 是只读包，创建此文件后不能添加、删除或编辑文件。

使用assets/css文件夹中的css文件很简单：使用 html 文件中的相对路径，它适用于所有平台。

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

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

"extraFiles": [
  "files",
  "assets",
  "accounts"
]

注意：不会复制空文件夹

在你的应用程序中使用类似 this module 的东西来获取你的应用程序的根路径，并通过这个路径使用你的文件

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

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

电子生成器和资产文件

Electron builder and asset files

fs

electron

electron-builder