前几篇介绍了一些基本的用法，最终会打包成可执行的应用。今天我们讲一下如何打包1.设置应用appId，在package.json中添加"appId":"com.ipp.electronvue"，2.添加vue.config.js这个文件，用于配置参数打包工具electron-builder，代码中也有相应的注释，根据相应的配置修改成自己的图标即可。module.exports={//第三方插件配置pluginOptions:{//vue-cli-plugin-electron-builder配置electronBuilder:{builderOptions:{//设置打包后的应用名称productName:'electron-vue-demos',win:{icon:'public/electron-icon/icon.ico',//windows系统中的图标路径需要一张256*256的ico格式图片，应用图标的替换也在这里target:[{//打包成一个Standaloneexeinstallertarget:'nsis',//意思是打印出一个32位+64位的包，但是要注意：这样打包的安装包比较大arch:['x64'//'ia32']}]},dmg:{内容:[{x:410,y:150,type:'link',path:'/Applications'},{x:130,y:150,type:'file'}]},linux:{//设置linux图标的icon:'resources/ico/icon.png',target:'AppImage'},mac:{icon:'resources/ico/icon.icns'},files:['**/*'],extraResources:{//复制dll等静态文件到指定位置，否则会出现dll打包后找不到Questionfrom:'resources/',to:'./'},asar:false,nsis:{//是否一键安装，建议为false，让用户点击下一步，next，和nexttoinstallProgram，如果为true，当用户双击构建的程序时，程序会自动安装并打开，即：one-clickinstaller（一键安装程序）oneClick:false,//Allowrequestforpromotion如果为false，用户必须使用提升的权限来重新启动安装程序。allowElevation:true,//允许修改安装目录，建议为true，是否允许用户更改安装目录，默认不允许allowToChangeInstallationDirectory:true,//安装图标installerIcon:'resources/ico/icon.ico',//卸载图标uninstallerIcon:'resources/ico/icon.ico',//安装时的头部图标installerHeaderIcon:'resources/ico/icon.ico',//创建桌面图标createDesktopShortcut:true,//创建开始菜单图标createStartMenuShortcut:true}},chainWebpackMainProcess:config=>{config.plugin('define').tap(args=>{args[0].IS_ELECTRON=truereturnargs})},chainWebpackRendererProcess:config=>{config.plugin('define').tap(args=>{args[0].IS_ELECTRON=truereturnargs})}}}}这里需要注意extraResources参数，因为有些资源的路径会打包后变化，比如托盘图标，会出现找不到的情况，所以我们把e图片放在根目录的resources文件夹中，然后将resources文件夹中的资源文件打包放到相应的位置，这样我们background.js需要修改如下：//设置托盘tray=newTray('resources/ico/icon.png')3.执行打包命令runelectron:build4。修改系统通知的应用包名应用打包后，在测试系统通知中显示包名。这里我们改成应用的中文名称。我们只需要在background.js中添加app.setAppUserModelId('myprogram')即可。electron打包最重要的是在vue.config.js中对electronBuilder打包工具的各种配置，下篇文章会讲解如何调用C#动态链接库dll文件。更多内容请关注公众号（自增程序员）
