electron-builder 打包自定义路径配置

这篇博客主要介绍了如何使用electron-builder进行nsis打包时自定义路径配置。首先,在vue项目的package.json中,展示了部分配置内容,并提到了electron-builder的nsis配置文档。接着,博主解释了如何修改默认安装路径,指出可以在package.json下配置nsis,并给出了installer.nsh文件的位置和内容示例。参考链接来自优快云和简书的文章。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、nsis打包自定义路径配置

vue 项目下package.json文件部分内容(使用的时候把注释去掉)

{
  "scripts": {
    "dev": "cross-env TERGET_ENV=development node .electron-vue/dev-runner.js",
    "build": "cross-env BUILD_TARGET=clean node .electron-vue/build.js  && electron-builder",
    "build:win32": "cross-env BUILD_TARGET=clean node .electron-vue/build.js  && electron-builder --win  --ia32",  // 32位打包
    "build:win64": "cross-env BUILD_TARGET=clean node .electron-vue/build.js  && electron-builder --win  --x64",   // 64位打包
  },
  "build": {
    "asar": false,
    "extraFiles": [],
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1"
      }
    ],
    "productName": "projectName",  // .exe拓展名称
    "appId": "org.Sky.electron-vue",
    "
### 使用 `electron-builder` 打包 Electron 应用程序 #### 安装必要的工具和配置环境 为了成功打包 Electron 应用程序,需先确保已安装 Node.js 的最新 LTS 版本,并熟悉 Electron 官方文档[^2]。对于国内开发者来说,建议配置淘宝镜像来加速 npm 包的下载速度。 #### 创建并初始化项目结构 假设已经有一个基于 Vue CLI 构建的应用,则可以通过如下命令创建一个新的 Electron 插件实例: ```bash vue add electron-builder ``` 这会自动设置好所需的文件夹结构以及依赖项。 #### 修改构建配置 针对特定需求调整项目的构建选项,在 vue.config.js 文件内加入自定义参数以允许用户选择安装路径: ```javascript const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ pluginOptions: { electronBuilder: { builderOptions: { nsis: { oneClick: false, allowToChangeInstallationDirectory: true } } } }, }) ``` 上述代码片段展示了如何通过修改 `nsis` 字段中的属性值让最终生成的 Windows Installer 支持更改默认安装位置的功能[^4]。 #### 处理外部依赖(dep) 当应用程序存在额外的二进制资源或其他类型的静态资产时,可能需要手动指定这些文件的位置以便于被打包到最终产物里去。通常情况下可以在 package.json 中添加 `"files"` 或者利用 `.gitignore` 类似的机制排除不必要的内容;而对于某些特殊的场景则要借助于 `extraFiles` 属性来进行更细粒度控制。 另外需要注意的是如果遇到类似 “无法找到模块” 这样的错误提示,可能是由于缺少某些本地编译好的 native addons 导致的,此时应该参照官方指南或是社区反馈尝试重新安装相关组件或更新其版本号[^3]。 #### 开始构建流程 完成以上准备工作之后就可以执行实际的打包操作了。有两种主要的方式可以触发这个过程: - **自动化方式**: 直接运行 `npm run build`, 此命令将会调用底层脚手架所提供的功能完成整个编译链路; - **手工干预模式**: 如果希望对中间环节有更多的掌控权的话也可以单独发出指令如 `electron-builder --win --x64` 来仅限为某操作系统平台定制化产出物[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值