如何让 Electron-builder 为安装程序打包非代码文件以将它们安装在用户主目录 (app-data) 中

Question

我想要完成的事情：

我想了解如何配置 Electron-Builder/Webpack 来打包非代码文件（配置文件、XML 文件、元数据文件、JSON 文件），这样当安装程序安装应用程序时，这些文件将保存在用户家中本地机器上的目录。我明白将这些文件存储在已安装的二进制文件之外的重要性，因此当用户更新他们的版本时，他们不会丢失他们可能设置的任何自定义。但是这些文件的初始版本必须存在于某个地方，例如这些文件的模板版本。

我找到了一些教程，解释了如何将这些非代码文件作为包的一部分包含在内： Electron - 如何添加外部文件？

如何管理 Webpack/Electron 应用程序的配置？

但是我从这些帖子中没有看到或理解的是如何配置安装程序，以便在运行时，这些文件将被复制到用户主目录（appData 文件夹）。特别是如果这些文件已经安装以避免覆盖它们或询问用户是否要覆盖它们？怎么设置呢？

还必须有一些配置设置，以允许这些文件保留在 Github 存储库中，并使开发人员能够使用这些非代码文件的开发路径，同时不会破坏用户安装版本上这些文件的生产路径。如何设置这种配置？

这是我项目中的文件夹结构：

src
 - Application
    - electronVueJS-App
       - application.js
       - App.vue
       - build.js
       - registerServiceWorker.js
       - ...Rest of the files/folders for the application....
       - Resources
          - Configuration
             - Colors.csv
             - Configuration.xml
 - Framework
    - CommandsBlob
       - commands.xml
    - Workflows
       - workflows.xml
    - ....Rest of my code files/folders....

我想第 1 步可能会让我将所有非代码 XML 文件移动到至少 2 个文件夹中，一个在 Application 文件夹中，另一个在 Framework 文件夹中，我准备这样做，但我想全面了解所有这些 Electron-Builder/WebPack/Installer 配置是如何设置的，以便在我重新构建应用程序代码之前，配置文件将安装在用户本地系统的主目录路径中。

我想还有其他问题，但我想我可以尝试单独解决这些问题，如果我遇到另一个阻止程序，则提交另一个问题。但是，如果您有可以帮助我的链接，请务必分享。

设置自动更新程序后，如何告诉用户特定更新是否需要对其配置文件进行重大更改。

如何设置卸载程序，以便用户可以选择在卸载过程后保持配置文件完好无损，或者继续删除所有内容？

我的仓库：https : //github.com/SethEden/electronVueJS-App/

感谢您的帮助！！

更新：

我已经清除了上述 repo 的代码库，并返回到一个非常基本的配置来尝试让它工作。我发现 NSIS 是为 Electron 应用程序构建 Windows 安装程序的工具。我正在尝试按照本教程进行操作：

https://youtu.be/QowWa3aVCQw

当我尝试将 NSIS 构建目标添加到我的 package.json 时，我从 Electron-Builder 收到一个与 VueJS 相关的错误，并告诉我将我的构建移动到 Vue.config.js 文件中。

所以我这样做了，现在我收到了这个错误：

(node:16532) UnhandledPromiseRejectionWarning:
Error: cannot find specified resource "LICENSE",
nor relative to "C:\electronVueJS-App\build",
neither relative to project dir ("C:\electronVueJS-App")

我什至试图从我的 vue.config.js 文件中的构建定义中完全删除许可证，但现在我的 NSIS 安装程序没有许可证。此外，更重要的是，如果我什至无法在我的构建配置中指定 NSIS 许可证文件，我怎么能指定将非代码文件添加到我的构建中？更重要的是，我如何告诉 NSIS 将它们安装在本地安装系统路径上的用户 AppData 文件夹中？

有人可以帮我解决这个问题吗？被这个问题困住了，我感到非常气馁。

谢谢和干杯~赛斯

Answer 1

假设您在src目录中有一个user.config文件，并且您想将它放在APPDATA目录中。

1. 首先你需要打包这个文件。可以按如下方式完成：

   "build": {
       "extraFiles": [
         {
          "from": "./src/user.config",
          "to": "."
         }
       ]
    }
   

   这会将user.config文件放在打包源的根目录中。

2. 现在我们需要告诉安装程序将此文件放在APPDATA 目录中。为此，我们需要编写一个自定义的 nsis 脚本。您可以将此脚本放在构建文件夹中。

   "build": {
         "extraFiles": [
            {
               "from": "./src/user.config",
               "to": "."
            }
          ]
    },
    "nsis": {
         "include": "build/installer.nsh"
    }
   

   installer.nsh的内容应如下所示：

   !macro customInstall
     CreateDirectory $LOCALAPPDATA\*(YOUR_APP_NAME)*
     CopyFiles $INSTDIR\user.config $LOCALAPPDATA\*(YOUR_APP_NAME)*
     Delete $INSTDIR\user.config
   !macroend
   

   在此处阅读更多相关信息

此外，为了在源文件中获取APPDATA路径，您可以这样获取：

process.env.LOCALAPPDATA