electron打包deb（electron-builder打包配置说明）

发现问题

通过vue建立的项目使用electron-builder打包(不会eletron打包vue项目的看这里)出exe后发现名字就直接是项目文件夹的名字    
    
    
，但此时想自定义汉字名称   


     


     


    ，通过尝试直接修改package.json中的name后发现此法仅限于修改为英文名称



 




 




 


，汉字会报错无法打包    
    
    
。

踩坑过程

在网上翻阅后发现有人直接在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生成

项目源码

为了避免自己踩坑
















，也为了方便后来者               ，这里我将vue使用electron-builder打包后的模板项目源码放这儿了
















。