Electron 桌面应用打包(windows)简述

最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用,现就其中打包流程写个备注,以示记录。

1.首先贴一下package.json。

{
    //隐藏项目名 
    "name": "******",
    //隐藏版本号
    "version": "**.**.**",
    //隐藏作者信息 
    "author": "*** <***>",
    //隐藏应用描述 
    "description": "***",
    "license": "MIT",
    "main": "./dist/electron/main.js",
    "scripts": {
        "build": "node .electron-vue/build.js && electron-builder",
        "build:dir": "node .electron-vue/build.js && electron-builder --dir",
        "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
        "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
        "dev": "node .electron-vue/dev-runner.js",
        "pack": "npm run pack:main && npm run pack:renderer",
        "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
        "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
        "postinstall": ""
    },
    "build": {
        //隐藏包名 
        "productName": "***",
        //隐藏appid
        "appId": "org.***.electron-vue",
        "directories": { "output": "build" },
        "publish": [
            {
                "provider": "generic",
                //隐藏自动更新存包服务器IP
                "url": "http://**.**.**.**:3001/download/"
            }],
        "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",
            "artifactName": "${productName}_setup_${version}.${ext}"
        },
        "win": {
            "icon": "build/icons/icon.ico",
            "artifactName": "${productName}_setup_${version}.${ext}"
        },
        "linux": {
            "icon": "build/icons",
            "artifactName": "${productName}_setup_${version}.${ext}"
        }
    },
    "dependencies": {
        "electron-updater": "^2.18.2",
        "jenkins-api": "^0.3.1",
        "socket.io": "^2.0.4",
        "socket.io-client": "^2.0.4",
        "vue": "^2.3.3",
        "vue-electron": "^1.0.6",
        "vue-router": "^2.5.3",
        "xml2js": "^0.4.19"
    },
    "devDependencies": {
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.6.0",
        "babel-preset-stage-0": "^6.24.1",
        "babel-register": "^6.24.1",
        "babili-webpack-plugin": "^0.1.2",
        "cfonts": "^1.1.3",
        "chalk": "^2.1.0",
        "copy-webpack-plugin": "^4.0.1",
        "cross-env": "^5.0.5",
        "css-loader": "^0.28.4",
        "del": "^3.0.0",
        "devtron": "^1.4.0",
        "electron": "^1.7.5",
        "electron-builder": "^19.19.1",
        "electron-debug": "^1.4.0",
        "electron-devtools-installer": "^2.2.0",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^0.11.2",
        "html-webpack-plugin": "^2.30.1",
        "less": "^3.0.0-alpha.3",
        "less-loader": "^4.0.5",
        "multispinner": "^0.2.1",
        "node-loader": "^0.6.0",
        "style-loader": "^0.18.2",
        "url-loader": "^0.5.9",
        "vue-html-loader": "^1.2.4",
        "vue-loader": "^13.0.5",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.4.2",
        "webpack": "^3.5.2",
        "webpack-dev-server": "^2.7.1",
        "webpack-hot-middleware": "^2.18.2"
    }
}

2.项目打包

一件构建系统打包命令,根目录执行npm run build;

3.打包依赖安装

electron打包,执行npm run build命令,速度很慢,无论翻墙与否,均无法顺利下载打包相关依赖(electron-v1.7.9-win32-x64\electron-builder-19.19.1\winCodeSign-1.9.0\ nsis-3.0.1.13\ nsis-resources-3.3.0),执行打包操作。00010002执行npm run build之前先设置淘宝镜像set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/electron-v1.7.9-win32-x64: 首先卸载其他版本,然后指定安装1.7.9版本到开发依赖中;npm uninstall electron && npm install electron@”1.7.9” –save-dev;electron-builder-19.19.1: 解决方法同electron-v1.7.9-win32-x64;

winCodeSign-1.9.0:Warning: Cannot download winCodeSign, attempt #1: Error: Request timed out,多次下载均无法完成,参照electron-builder项目中的issues地址:https://github.com/electron-userland/electron-builder/issues/2009;首先下载https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-1.9.0;然后解压到相应的缓存目录中;

nsis-3.0.1.13:翻墙后可以下载成功;

nsis-resources-3.3.0:翻墙后下载两次可以成功。

Cache目录最终文件:0003

4.打包应用

解决以上问题之后,打包即可正常完成,打包后.exe(windows安装包)、.yml(windows自动更新配置)文件存放于./build文件夹中。

You may also like

发表评论

电子邮件地址不会被公开。