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

标签 webpack installation electron uninstallation electron-builder

我想要完成的事情:
我想了解如何配置 Electron-Builder/Webpack 来打包非代码文件(配置文件、XML 文件、元数据文件、JSON 文件),这样当安装程序安装应用程序时,这些文件将保存在用户家中本地机器上的目录。我明白将这些文件存储在已安装的二进制文件之外的重要性,因此当用户更新他们的版本时,他们不会丢失他们可能设置的任何自定义。但是这些文件的初始版本必须存在于某个地方,例如这些文件的模板版本。
我找到了一些教程,解释了如何将这些非代码文件作为包的一部分包含在内:
Electron - How to add external files?
How to manage configuration for Webpack/Electron app?
但是我从这些帖子中没有看到或理解的是如何配置安装程序,以便在运行时,这些文件将被复制到用户主目录(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 配置是如何设置的,以便在我重新构建应用程序代码之前,配置文件将安装在用户本地系统的主目录路径中。
我想还有其他问题,但我想我可以尝试单独解决这些问题,如果我遇到另一个阻止程序,则提交另一个问题。但是,如果您有可以帮助我的链接,请务必分享。
设置自动更新程序后,如何告诉用户特定更新是否需要对其配置文件进行重大更改。
如何设置卸载程序,以便用户可以选择在卸载过程后保持配置文件完好无损,或者继续删除所有内容?
我的 repo :
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 文件夹中?
有人可以帮我解决这个问题吗?被这个问题困住了,我感到非常气馁。
谢谢&干杯
~赛斯

最佳答案

假设您有一个 用户配置 中的文件源 目录,你想把它放在 APPDATA 目录。

  • 首先你需要打包这个文件。它可以做为
    如下:
    "build": {
        "extraFiles": [
          {
           "from": "./src/user.config",
           "to": "."
          }
        ]
     }
    
    这将放置 用户配置根目录下的文件
    打包源码。
  • 现在我们需要告诉安装程序将此文件放在 中。 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
    

    关于webpack - 如何让 Electron-builder 为安装程序打包非代码文件以将它们安装在用户主目录 (app-data) 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63270412/

    相关文章:

    webpack - 为什么 hot-update.json 文件挤满了我的项目目录

    angular - 无法使用 Angular2 和 webpack 加载静态图像

    javascript - 模块解析失败 : Unexpected token

    python - apt-get 安装不同的 python 版本

    javascript - Windows Snap Assist 找不到我的 Electron 应用程序

    reactjs - Webpack 开发服务器 - 在多个端口上运行多个应用程序

    python - 无法在我的 Python 项目中使用 Pillow

    python - 如何使用 distutils 安装到特定的 Python 安装?

    electron - 我想阻止 Electron 应用程序与外界通信

    node.js - 使用客户端证书将 HTTP 代理 Node 连接到 HTTPS 服务器