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

问题描述

我想要完成的事情：

我想了解如何配置 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 文件夹中？

有人可以帮我解决这个问题吗？我因陷入这个问题而感到非常沮丧。

谢谢你和干杯~赛斯

标签： webpackinstallationelectronuninstallationelectron-builder

解决方案

假设您在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

在此处阅读有关此的更多信息

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

process.env.LOCALAPPDATA

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

问题描述

解决方案

推荐阅读