打包教程：electron-builder

打包项目路径不能存在中文，否则打包失败

https://www.electron.build/

https://www.kancloud.cn/hongluhuo/electron-builder/495150

https://nklayman.github.io/vue-cli-plugin-electron-builder/

1、全局安装插件

yarn add electron-builder --dev
或
npm install electron-builder --dev

在package.json中添加打包脚本
在package.json中, 添加如下内容:

"build": {
    "appId": " your.id ",
    "mac": {
        "category": " your.app.category.type "
    }
}

在scripts中, 添加如下内容:

"pack": " electron-builder --dir ",
"dist": " electron-builder --win --x64",
"postinstall": "electron-builder install-app-deps"

{
"build": {
    "appId": "com.dapaidang.app",
    "electronVersion": "4.1.4",
    "publish": [
      {
        "provider": "generic",
        "url": "http://www.baidu.com/"
      }
    ],
    "win": {
      "target": "nsis",
      "icon": "./icon.ico"
    }
  },
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "electron-packager . myFirstElectron --win --out ./dist --arch=x64 --app-version=0.0.1 --electron-version=4.1.4",
    "dist": "electron-builder",
    "dist-win": "electron-builder --win --ia32"
  },
}

yarn dist-win
或
npm run dist-win

添加electron及配套依赖

npm install concurrently cross-env electron@11.5.0 electron-builder wait-on --save-dev

npm i --save-dev electron electron-builder vue-cli-plugin-electron-builder electron-devtools

electron常用依赖库

npm install --save-dev @electron/remote

{
"name": "APPname",//应用名称
"version": "1.1.0",//版本号
"main": "electron/main.js",//引入electron主程序文件
"author":"SUREN",//作者
"description":"应用描述",
"scripts": { // 事件示例 调试一般运行npm run electron:serve
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron": "wait-on tcp:8080 && cross-env NODE_ENV=development electron .",
    "electron:serve": "concurrently -k \"npm run serve\" \"npm run electron\"",
    "electron:build": "npm run build && electron-builder"
},
"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.xxx.xxxxx",//包名
    "copyright":"xxxx",//版权信息
    "directories": { //输出文件夹
        "output": "build"
    },
    "nsis": {//nsis相关配置，打包方式为nsis时生效
        "oneClick": false, // 是否一键安装
        "allowElevation": true, // 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
        "allowToChangeInstallationDirectory": true, // 允许修改安装目录
        "installerIcon": "./build/icons/aaa.ico",// 安装图标
        "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
        "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
        "createDesktopShortcut": true, // 创建桌面图标
        "createStartMenuShortcut": true,// 创建开始菜单图标
        "shortcutName": "xxxx", // 图标名称
        "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
    },
    "publish": [
        {
            "provider": "generic", // 服务器提供商，也可以是GitHub等等
            "url": "http://xxxxx/" // 服务器地址
        }
    ],
    "win": {
        "icon": "build/icons/aims.ico",
        "target": [
        {
            "target": "nsis",//使用nsis打成安装包，"portable"打包成免安装版
            "arch": [
                "ia32",//32位
                "x64" //64位
            ]
        }
        ]
    },
    "mac": {
        "icon": "build/icons/icon.icns"
    },
    "linux": {
        "icon": "build/icons"
    }
}
}