Electron-builder打包vue桌面程序安装包

缺乏、安全感 2022-12-11 01:30 316阅读 0赞

## 准备工作 ##

已完成[Electron打包vue项目成桌面端程序][Electron_vue]文章一、二、三、四步

## 一、安装打包工具 electron-packager ##

cnpm install electron-builder -g

## 二、修改package.json ##

在package.json的基础上新增

"build": { 
        "productName": "electron桌面端",
        "appId": "com.lihefei.electron",
        "copyright": "© lihefei",
        "directories": { 
            "buildResources": "public",
            "output": "out"
        },
        "nsis": { 
            "oneClick": false,
            "allowElevation": true,
            "allowToChangeInstallationDirectory": true,
            "installerIcon": "public/favicon.ico",
            "installerHeaderIcon": "public/favicon.ico",
            "createDesktopShortcut": true,
            "createStartMenuShortcut": true
        },
        "files": [
            "dist/**/*",
            "main.ts",
            "package.json"
        ],
        "win": { 
            "icon": "public/favicon.ico",
            "target": [
                { 
                    "target": "nsis",
                    "arch": [
                        "ia32"
                    ]
                }
            ]
        }
    },
    "scripts": { 
        "postinstall": "electron-builder install-app-deps",
        "builder": "electron-builder"
    }

## 三、执行命令打包 ##

npm run electron-builder

安装文件输出在`/out`文件夹下，双击可正常安装

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]

参考教程，相关参数可以：  
[https://github.com/QDMarkMan/CodeBlog/blob/master/Electron/electron-builder%E6%89%93%E5%8C%85%E8%AF%A6%E8%A7%A3.md][https_github.com_QDMarkMan_CodeBlog_blob_master_Electron_electron-builder_E6_89_93_E5_8C_85_E8_AF_A6_E8_A7_A3.md]  
[https://www.azimiao.com/6191.html][https_www.azimiao.com_6191.html]

[Electron_vue]: https://lihefei.blog.csdn.net/article/details/108781680
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20221123/ed1ab05b183d41ac841748ec5a872ecf.png
[https_github.com_QDMarkMan_CodeBlog_blob_master_Electron_electron-builder_E6_89_93_E5_8C_85_E8_AF_A6_E8_A7_A3.md]: https://github.com/QDMarkMan/CodeBlog/blob/master/Electron/electron-builder%E6%89%93%E5%8C%85%E8%AF%A6%E8%A7%A3.md
[https_www.azimiao.com_6191.html]: https://www.azimiao.com/6191.html