vue项目使用Electron开发桌面应用

1、添加npm配置避免安装Electron错误

请确保您的 node 版本大于等于 16

cmd运行： npm config edit
该命令会打开npm的配置文件，请在空白处添加：
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
registry=https://registry.npmmirror.com/
然后保存并关闭该窗口

或者在项目根目录创建 .npmrc 文件，项目下 .npmrc 文件的优先级最高，可以给每个项目配置不同的镜像，项目之间的配置互不影响。
添加：
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
registry=https://registry.npmmirror.com/

2、因为一些众所周知的原因，建议国内的小伙伴使用cnpm安装并且把源改为淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、开始全局安装 Electron

cnpm install electron -g

安装完成运行electron -V，查看是否安装成功

4、在vue项目中安装

vue add electron-builder

安装过程报错的话一般是 vue-cli-plugin-electron-builder 安装失败，重新安装一下即可：

cnpm i vue-cli-plugin-electron-builder -D

安装完成后 package.js 中会增加两个脚本（运行/打包）：

“electron:build”: “vue-cli-service electron:build”
“electron:serve”: “vue-cli-service electron:serve”

5、Electron消顶部默认菜单栏

在background.js中配置 Menu.setApplicationMenu(null) ：

import { Menu } from 'electron'

async function createWindow() {
  Menu.setApplicationMenu(null) // null值取消顶部菜单栏
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      
      // Required for Spectron testing
      enableRemoteModule: !!process.env.IS_TEST,
      
      // 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
    }
  })

  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')
  }
}

6、解决electron vue 项目中 Failed to fetch extension, trying 4 more times

注释掉安装vue devtools的代码

vue页面中引入 electron 的内部模块导致的报错解决方案

在 vue.config.js 中 pluginOptions 配置

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
    },
  },
});

快速生成应用图标

1、先安装依赖：

npm i electron-icon-builder

2、package.json中添加命令：

"scripts": {
...
"electron:ico": "electron-icon-builder --input=./public/title-logo.ico --output=build --flatten",
...
}

3、运行命令：

npm run electron:ico

打包常用配置：

在 vue.config.js 中 pluginOptions 配置

module.exports = {
  //判断开发模式还是生产模式
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  //插件配置
  pluginOptions: {
    //electronBuilder配置
    electronBuilder: {
      builderOptions: {
        'productName': 'all electron',//生成exe的名字
        "appId": "com.xi.www",//包名  
        "copyright": "xi",//版权信息
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
          "createDesktopShortcut": true, // 是否创建桌面图标
          "createStartMenuShortcut": true,// 是否创建开始菜单图标
          "shortcutName": "all-electron", // 快捷方式名称
          "runAfterFinish": false,//是否安装完成后运行
        },
        "win": {
          "target": [
            {
              "target": "nsis", //利用nsis制作安装程序
              "arch": [
                "x64", //64位
                // "ia32" //32位
              ]
            }
          ]
        }
      }
    }
  }
}