vue2+electron桌面端一体机应用

vue2+electron项目

前言：公司有一个项目需要用Vue转成exe，首先我使用vue-cli脚手架搭建vue2项目，然后安装electron

安装electron

这一步骤可以省略，安装electron-builder时会自动安装electron

npm i electron

安装electron-builder

vue add electron-builder

项目中多出如下

根据需求修改部分选项

最后运行npm run electron:serve

打包

打包前需要做一些设置

1.设置打包的图标

安装electron-icon-builder

npm i electron-icon-builder

pages.json中添加

“electron:generate-icons”:“electron-icon-builder --input=./public/icon.png --output=public --flatten”,

然后再pulic中添加icon.png

运行命令

npm run electron:generate-icons

public中多了icons文件夹

添加electron打包配置

在vue.config.js中

...
pluginOptions:{
    electronBuilder:{
      nodeIntegration:true,
      customFileProtocol: "./",
      builderOptions: {
        appId: "com.example.app",
        productName: "项目名",//项目名，也是生成的安装文件名，即aDemo.exe
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: "public/icons/icon.ico", // 安装图标
          uninstallerIcon: "public/icons/icon.ico", //卸载图标
          installerHeaderIcon: "public/icons/icon.ico", // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true, // 创建开始菜单图标
          shortcutName: "demo", // 图标名称
        },
        // electronDownload: {
        //   mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置
        // },
        win: {
          icon: 'public/icons/icon.ico', //这里注意配好图标路径
          target: [
            {
              "target": "nsis",
              "arch": [
                "x64"
              ]
            }
          ],
          artifactName: "${productName}-Windows-${version}-Setup.${ext}"
        },
        mac: {
          icon: 'public/icons/icon.icns',
          target: [
            "dmg"
          ],
          artifactName: "${productName}-Mac-${version}-Installer.${ext}"
         },
      }
    },
  }
  

最后运行命令npm run electron:build

问题汇总

详见：electron问题汇总