如何让Electron-builder打包非代码文件供安装程序安装到用户主目录（app-data）

Question

我想完成的事情：

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

我找到了一些教程，它们解释了如何将这些非代码文件作为包的一部分包含在内：

但是我没有从这些帖子中看到或理解如何配置安装程序，以便在它运行时将这些文件复制到用户主目录（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 目录.

首先你需要打包这个文件。可以这样做如下：

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

这会将user.config文件放在打包源。

现在我们需要告诉安装程序将这个文件放在 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

阅读更多相关信息here

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

process.env.LOCALAPPDATA

如何让Electron-builder打包非代码文件供安装程序安装到用户主目录（app-data）

How to get Electron-builder to package non-code files for the installer to install them in the user home directory (app-data)

installation

uninstallation

webpack

electron

electron-builder