阅读 1635

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
        }
    },
复制代码
  1. npm run build 运行项目

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

  1. 配置参数解析
    "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. 打包注意事项
    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运行项目

参考

文章分类
阅读
文章标签