Electron-builder 打包配置项目中文名称和自动运行

发布于 2023-11-14 12:46:13 字数 2177 浏览 22 评论 0

网上翻阅后发现有人直接在 package.json 中这样添加 build:

"scripts": {
    // ...
  },
  "build": {
    "productName": "xxx",
    "appId": "xxx",
    // ...
   },

这其实是个大坑,我尝试后发现会报错无效配置:

InvalidConfigurationError: 'build' in the application package.json

后面又查了下,大概是版本原因,electron-builder 某个版本之后的配置得写在 vue.config.js 中才能生效。但网上好多文章都是直接在 package.json 里面配置,还有在 electron 生成的 background.js 里配置的。

解决办法

eletron 打包总会出现莫名其妙的问题,图标缺失、路径错误。其实大多数的坑都是国内网络环境和自己的项目配置问题,这里就配置做一 下说明。需要在 vue.config.js 中对 electron-builder 进行配置(没 vue.config.js 的自己建一个就 ok 了),具体配 置如下:

module.exports = {
  //判断开发模式还是生产模式
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  //插件配置
  pluginOptions: {
    //electronBuilder 配置
    electronBuilder: {
      builderOptions: {
        'productName': 'all electron',//生成 exe 的名字
        "appId": "com.xi.www",//包名  
        "copyright": "xi",//版权信息
        "directories": { // 输出文件夹
          "output": "electron_output",
        },
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。若为 false,则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
          "installerIcon": "./build/icons/icon.ico",// 安装时图标
          "uninstallerIcon": "./build/icons/icon.ico",//卸载时图标
          "installerHeaderIcon": "./build/icons/icon.ico", // 安装时头部图标
          "createDesktopShortcut": true, // 是否创建桌面图标
          "createStartMenuShortcut": true,// 是否创建开始菜单图标
          "shortcutName": "all-electron", // 快捷方式名称
          "runAfterFinish": false,//是否安装完成后运行
        },
        "win": {
          "icon": "build/icons/icon.ico",//图标路径
          "target": [
            {
              "target": "nsis", //利用 nsis 制作安装程序
              "arch": [
                "x64", //64 位
                // "ia32" //32 位
              ]
            }
          ]
        }
      }
    }
  }
}

其中值得注意的是:

1、directories 输出文件不做修改则默输出在 dist_electron 下。
2、productName 修改的名字允许为汉字。
3、所有路径均是相对与项目的根路径。
4、icon.ico 图标可通过这篇文章的 electron-icon-builder 生成

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文