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

由于我们使用npm run build的时候，electron默认打包的程序没有提供用户可以选择安装路径与安装语言向导，所以，我们在打包的时候还需要重新配置

打开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
        }
    },

npm run build 运行项目

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

配置参数解析

    "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" // 服务器地址
            }
        ]
    }

打包注意事项

1. 如果打包的图片或者图标路径找不到，则会打包失败，例如：打包build配置里，配置了win系统的图标路径，如果把build下的icon删掉，打包时就会找不到这个图标，打包异常。所有此时不要把build目录下的icon文件夹删掉
```
"win": {
            "icon": "build/icons/icon.ico",//图标路径 
        }
```
1. 如果打包时网络出错，也会打包不成功
1. 项目中放置图片路径，请尽量放到static目录下，不要放到assets下，因为webpack打包时，会打包assets（把小于*k的图片打包了，也就是数没有这个路径），不打包static。所以有时候assets路径出错，找不到该文件路径，打包失败
1. 在打包桌面应用时，如果打包前的一次运行项目是运行web端的，就会打包web端的，所以一定要记得打包桌面应用时，先npm run dev运行项目

参考