1.在已经完成的vue项目中安装electron

执行 npm install electron --save 由于本地网络限制，安装会报错：

后来发现是在安装中某些依赖包无法下载，将镜像包改为淘宝的镜像:

npm config set registry https://registry.npm.taobao.org/

然后使用cnpm安装

cnpm install electron --save

2.安装electron-builder

执行

vue add electron-builder

安装过程很慢...

安装完成后，会在package.json中生成以下指令

在src目录下也会生成一个background.js文件

3.执行`npm run electron:serve`可查看是否安装成功

**漫长的等待。。**发现桌面打开了一个客户端

没截图了

4.打包客户端

打包客户端客户端可以在vue.config.js中配置一些客户端的相关配置

  pluginOptions: {
    //electronBuilder配置
    electronBuilder: {
      builderOptions: {
        productName: "xxx", //生成exe的名字
        appId: "com.xxx.www", //包名
        copyright: "xxx", //版权信息
        directories: {
          output: "./xxx", //输出文件路径，之前编译的默认是dist_electron
        },
        electronDownload: {
          mirror: 'https://npm.taobao.org/mirrors/electron/',
        },
        win: {
          icon: "./public/index.ico", //图标路径
          target: [
            {
              target: "nsis", //利用nsis制作安装程序
              arch: [
                "x64", //64位
                // "ia32" //32位
              ],
            },
          ],
        },
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, //是否允许修改安装目录
          installerIcon: "./public/index.ico", // 安装时图标
          uninstallerIcon: "./public/index.ico", //卸载时图标
          installerHeaderIcon: "./public/index.ico", // 安装时头部图标
          createDesktopShortcut: true, // 是否创建桌面图标
          createStartMenuShortcut: true, // 是否创建开始菜单图标
          shortcutName: "selfdiagnosis", // 快捷方式名称
          runAfterFinish: true, //是否安装完成后运行
        },
      },
    },
  }

需要注意的是，配置中引用的图标有一个小小的要求，必须是256*256，我打包的时候报错了额，

按照要求随便找了个符合尺寸的图标， build时还会报错报错，不懂为啥，反正它一直在尝试，

最后一次应该是成功了吧，因为打包目录下有exe文件，双击也能打开，内容无问题，这报错是啥我就不管了，懒得看

但是打包之后，整个文件夹都需要用到，怎么才能把一个安装包给别人，让别人安装呢，难道直接压缩？我学习学习先

如果代码中用到了类似elementui的样式文件，记得把vueconfig文件中的相关配置删一删哦，可能会影响客户端的样式展示，找了半天问题

5.生成桌面右下角系统托盘图标

5.1 在background.js下导入Menu和Tray

import { app, protocol, BrowserWindow, Menu, Tray } from "electron"; 5.2设置tray变量，并在createWindow中加入如下代码，图中包含了一些窗口的配置

let tray = null
async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 300,
    height: 500,
    center: true, // 是否出现在屏幕居中的位置
    useContentSize: true,
    frame:true,//设置为 false 时可以创建一个无边框窗口
    resizable:true,//窗口是否可以改变尺寸
    autoHideMenuBar:true,//是否隐藏菜单栏
    backgroundColor:'#fff',// 窗口的背景颜色为十六进制值
    // titleBarStyle:'hidden',//窗口标题栏的样式
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });
  tray = new Tray('./static/index.png')
  const contextMenu = Menu.buildFromTemplate([
    { label: '退出',
      click: function () {
        app.quit()
      } }
  ])
  tray.setToolTip('xxx')
  //显示程序页面
  tray.on('click', () => {
    win.show()
  })
  tray.setContextMenu(contextMenu)
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

第一次使用Electron打包vue-cli创建的VUE项目