Electron与vue的组合

本篇文章出自：https://blog.csdn.net/honest1120110/article/details/116643392

创建vue项目

vue create myapp

安装electron环境

Electron安装

npm install electron

Vue项目添加Electron-builder打包工具

vue add electron-builder

提示：如果出现electron安装失败，
或者后面使用electron-builder打包时，出现从github down包失败，请设置electron镜像。

npm config edit

使用该命令会弹出npm的配置文档，将以下类容复制到文件末尾。

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

测试

npm run electron:serve

运行成功后会自动弹出一个窗口，这就是你的app了，你成功了吗？

替换客户端图标

进入项目路径，查看是否存在vue.config.js同名文件（好像是vue3没有，vue2会有），
没有则创建一个空文件。
编辑vue.config.js文件

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",
                "productName": "aDemo",//项目名，也是生成的安装文件名，即aDemo.exe
                "copyright": "Copyright © 2023",//版权信息
                "directories": {
                    "output": "./dist"//输出文件路径，之前编译的默认是dist_electron
                },
                "win": {
                    "icon": "Demo.ico"//这里注意配好图标路径
                }
                // options placed here will be merged with default configuration and passed to electron-builder
            }
        }
    }
}

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"
    }
  }

打包(生成桌面app)

npm run electron:build