Vue+Electron：常用配置

一. 构建配置

electron的相关配置和vue共用一个文件vue.config.js，注意，这个文件如果不存在，需要自己新建一个。下面是配置所在位置

// vue.config.js
module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
            	// 用户自己的构建配置放在这里
                // 在这里的配置将会和默认配置合并，然后传递给electron-builder
            }
        }
    }
}

通用配置

下面的配置是通用的，对所有的平台打包产物都有用，更多详细信息可以查看 Electron Builder Configuration Options

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                // 在这里的配置将会和默认配置合并，然后传递给electron-builder
                appId: 'com.example.vue-electron', // 项目唯一标识
                productName: 'Vue-Electron', // 打包产物的前缀
                copyright: 'Copyright © year ${author}', // 可用使用${}引用package.json里面配置项，配置项不存在会报错
                directories: {
                    output: 'dist' // 打包产物的位置
                }
            }
        }
    }
}

Mac平台的配置

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                // 在这里的配置将会和默认配置合并，然后传递给electron-builder
                appId: 'com.example.vue-electron', // 项目唯一标识
                productName: 'Vue-Electron', // 打包产物的前缀
                copyright: 'Copyright © year ${author}', // 可用使用${}引用package.json里面配置项，配置项不存在会报错
                directories: {
                    output: 'dist' // 打包产物的位置
                },
                // ------- Mac 相关配置
                mac: {
                    icon: 'build/icons/icon.icns', // 应用图标
                    category: 'public.app-category.utilities', // 应用类型
                    target: ['dmg'] // 打包的目标类型(默认是dmg和zip),支持很多类型，具体看文档
                }
            }
        }
    }
}

图标需要Mac平台特点的图标文件，category是应用的类型，具体可以查看Apple’s documentation；target为打包产物类型

Win平台的配置

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                // 在这里的配置将会和默认配置合并，然后传递给electron-builder
                appId: 'com.example.vue-electron', // 项目唯一标识
                productName: 'Vue-Electron', // 打包产物的前缀
                copyright: 'Copyright © year ${author}', // 可用使用${}引用package.json里面配置项，配置项不存在会报错
                directories: {
                    output: 'dist' // 打包产物的位置
                }
                // ------- windows 相关配置
                win: {
                    icon: 'build/icons/icon.ico', // 应用图标
                    target: ['nsis'] // 打包的目标类型,支持很多类型，具体看文档
                },
                nsis: {
                    "oneClick": false,
                    "perMachine": true,
                    "allowToChangeInstallationDirectory": true // 允许修改安装目录
                }
            }
        }
    }
}

nsis的具体配置可以查看NSIS

Linux平台的配置

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                // 在这里的配置将会和默认配置合并，然后传递给electron-builder
                appId: 'com.example.vue-electron', // 项目唯一标识
                productName: 'Vue-Electron', // 打包产物的前缀
                copyright: 'Copyright © year ${author}', // 可用使用${}引用package.json里面配置项，配置项不存在会报错
                directories: {
                    output: 'dist' // 打包产物的位置
                }
                // ------- linux 相关配置
                linux: {
                    icon: "build/icons", // 包含各种尺寸图标的文件夹
                    target: [
                        "AppImage",
                        "deb",
                        "rpm"
                    ],
                    category: "Utility",
                }
            }
        }
    }
}

linux的相关配置可以查看Linux配置

图标的生成

项目添加electron-icon-builder依赖

yarn add electron-icon-builder -D

然后再pac里面添加如下脚本：

"electron:icon": "electron-icon-builder --input=./static/icon.png --output=build --flatten"

需要将名字为icon.png，大小为256*256的原始图标文件放置在static文件夹内，当然static也可以是其他目录

然后执行如下命令，就可以生成所有平台的图标了.

yarn electron:icon