electron-vue项目笔记8——electron-builder（windows打包）

因为咱们使用npm run build的时候，electron默认打包的程序没有提供用户能够选择安装路径与安装语言向导，因此，咱们在打包的时候还须要从新配置

electron-builder官网，查看更多配置

1. 打开package.json文件,在win的配置里添加打包目标代码,build配置项里的最后，添加nsis配置

• 请注意，若是有代码签名证书，请配置正确的代码签名证书，若是没有证书，请删除配置"certificateFile": "sign-xxx.pfx", "certificatePassword": "xxxxxx",

• 若是在win里配置publish，打包出错的，请把publish配置删除。其实仍是能生成latest.yml

"build": {
        "productName": "data-visuation",
        "copyright": "copyright© Guangzhou shumei.,Ltd",
        "appId": "com.shumei.data-visuation",
        "asar": true,
        "asarUnpack":[
        "./dist/electron",
        "./package.json"
        ],
        "directories": {
            "output": "build"
        },
        "files": [
            "dist/electron/**/*"
        ],
        "dmg": {
            "contents": [
            {
                "x": 410,
                "y": 150,
                "type": "link",
                "path": "/Applications"
            },
            {
                "x": 130,
                "y": 150,
                "type": "file"
            }
            ]
        },
        "mac": {
            "icon": "build/icons/icon.icns"
        },
        "win": {
            "icon": "build/icons/icon.ico",
            "target": [
                {
                "target": "nsis",
                "arch": [ 
                    "ia32"
                ]
                }
            ]
        },
      
        "linux": {
            "icon": "build/icons"
        },
        "nsis": {
            "oneClick": false,
            "allowElevation": true,
            "allowToChangeInstallationDirectory": true,
            "installerIcon":"build/icons/icon.ico",
            "uninstallerIcon": "build/icons/icon.ico",
            "installerHeaderIcon": "build/icons/icon.ico",
            "createDesktopShortcut": true,
            "createStartMenuShortcut": true,
            "displayLanguageSelector": true,
            "multiLanguageInstaller": true,
            "installerLanguages": [
                "en_US",
                "zh_CN"
            ],
            "warningsAsErrors": false
        }
    },
复制代码

3. npm run build 运行项目

若是打包前上一步运行项目是web端的，则须要先npm run dev运行桌面端的程序，而后才能npm run build打包正确的桌面端

4. 配置参数解析

"build": {
        "productName": "data-visuation",//项目名 这也是生成的exe文件的前缀名
        "copyright": "copyright© Guangzhou shumei.,Ltd",//版权 信息
        "appId": "com.shumei.data-visuation",//包名 
        "asar": true,//asar包有助于加快安装文件的安装速度，若是保留全部文件夹的话，在释放文件的时候磁盘压力会比较大，所以，使用asarUnpack属性，将不须要打进asar包里的文件路径指定。
        "asarUnpack":[//使用asarUnpack属性，将不须要打进asar包里的文件路径指定。
            "./dist/electron",//这里的(electron文件夹下）index.html、main.js、rederer.js和styles.css就是每次编译生成的文件，所以，若是要进行增量更新，(electron文件夹下）这四个文件是必须更新的
            "./package.json"//因为每次版本更新时，package.json的内容也会改变，因此package.json也必须排除
        ],
        "directories": {// 打包输出的文件夹位置
            "output": "build"
        },
        "files": [
            "dist/electron/**/*"
        ],
        "dmg": {
            "contents": [
            {
                "x": 410,
                "y": 150,
                "type": "link",
                "path": "/Applications"
            },
            {
                "x": 130,
                "y": 150,
                "type": "file"
            }
            ]
        },
        "mac": {
            "icon": "build/icons/icon.icns"
        },
        "win": {
            "icon": "build/icons/icon.ico",//图标路径 
            "certificateFile": "sign-xxxx.pfx",//代码签名证书
            "certificatePassword": "xxxxx",//代码签名证书密码
            "target": [
                {
                    "target": "nsis",// 咱们要的目标安装包
                    "arch": [ // 这个意思是打出来32 bit + 64 bit的包，可是要注意：这样打包出来的安装包体积比较大，因此建议直接打32的安装包。
                        "x64", 
                        "ia32"
                    ]
                }
            ]
        },
      
        "linux": {
            "icon": "build/icons"
        },
        "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,// 建立开始菜单图标
            "displayLanguageSelector": true,//安装界面显示语言选择器
            "multiLanguageInstaller": true,//安装界面多国语言包
            "installerLanguages": [//安装界面多语言选项，若是配置该项，则（安装界面的提示文字）语言选择只有这个配置
                "en_US",
                "zh_CN"
            ],
            "warningsAsErrors": false// 安装警告不做为错误
        },
        "publish": [//publish此项用于软件更新的配置，主要是为了生成lastest.yaml配置文件
            {
              "provider": "guangzhou",// 服务器提供商 也能够是GitHub等等
              "url": "http://172.0.0.1:3000" // 服务器地址
            }
        ]
    }
复制代码

5. 打包注意事项

• 1. 若是打包的图片或者图标路径找不到，则会打包失败，例如： 打包build配置里，配置了win系统的图标路径，若是把build下的icon删掉，打包时就会找不到这个图标，打包异常。全部此时不要把build目录下的icon文件夹删掉

  "win": {
              "icon": "build/icons/icon.ico",//图标路径 
          }
  复制代码

• 2. 若是打包时网络出错，也会打包不成功
• 3. 项目中放置图片路径，请尽可能放到static目录下，不要放到assets下，由于webpack打包时，会打包assets（把小于*k的图片打包了，也就是数没有这个路径），不打包static。因此有时候assets路径出错，找不到该文件路径，打包失败
• 4. 在打包桌面应用时，若是打包前的一次运行项目是运行web端的，就会打包web端的，因此必定要记得打包桌面应用时，先npm run dev运行项目

参考

• Electron-builder打包详解
• Electron的一个增量升级方案