ray-note/web/electron/Electron 初学.md

安装Electron

• 使用npm初始化一个项目 npm init
• 项目内新增.npmrc 内容如下

# 添加
registry=https://registry.npmmirror.com
# 
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_CUSTOM_DIR={{ version }}

• 再使用 npm install --save-dev electron, 安装之前先把electron安装失败的cache删除掉

Electron 打包

ubuntu 安装 rpmbuild 参考博客

Vue3 + Electron

• 使用vite初始化一个vue-ts 的项目
• 安装Electron 相关的依赖
  • electron
  • electron-builder
  • electron-devtools-installer
  • rimraf
  • vite-plugin-electron
  • vite-plugin-electron-preload 不配置加载preload会失败
  • vite-plugin-electron-renderer 目前没有配置相关内容
• 注意：
  • 根据vite-plugin-electron 配置项目，并运行即可
  • 运行时可能会出现 electron 安装失败，把 node_modules 删除，删除掉 pnpm的lock yaml，和系统的electron的缓存，多安装几次，这个确实有点烦人
  • 使用 vite-plugin-electron 之后，还需要使用 vite-plugin-electron-preload 才能正确加载preload

Vue3 + Electron

• 使用electron-builder 打包
• 在项目的根目录下创建一个 electron-builder.json

{
  "productName": "ElectronViteVue3",
  "appId": "top.rayc.electrontest",
  "copyright": "Copyright © 2024-present Andy",
  "compression": "maximum",
  "asar": true,
  "directories": {
    "output": "release/${version}"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "perMachine": true,
    "deleteAppDataOnUninstall": true,
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "shortcutName": "ElectronVite4Vue3"
  },
  "win": {
    "icon": "./resource/shortcut.ico",
    "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
    "target": [
      {
        "target": "nsis",
        "arch": ["ia32"]
      }
    ]
  },
  "mac": {
    "icon": "./resource/shortcut.icns",
    "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
  },
  "linux": {
    "icon": "./resource",
    "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
  }
}

• 使用 electron-builder 命令安装就行
• 注意：
  • 在使用 electron-builder 打包需要下载几个压缩包，但是下载会失败，可以手动下载这些压缩包，把这些压缩包，保存到 electron 的 Cache 目录中

Electron 取消顶部菜单栏

• 在 主进程程序中进行修改
• 引入菜单 Menu

import { Menu } from "electron"

• 在 createWindow 方法中进行设置

const createWindow = () => {
  Menu.setApplicationMenu(null);
  const win = new BrowserWindow({
    title: "Electron + Vite",
    webPreferences: {
      contextIsolation: false, // 是否开启隔离上下文
      nodeIntegration: true, // 渲染进程使用 Node.js API
      //   sandbox: false,
      preload: path.join(__dirname, "preload.js"), // 预加载脚本
    },
  });
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL);
    win.webContents.openDevTools();
  } else {
    // Load your file
    win.loadFile("dist/index.html");
  }
  // 开启调试工具
};

Electron 错误

Uncaught TypeError: path.join is not a function at node_modules/electron/index.js 解决办法: 参考博客

• 安装 vite-plugin-optimizer
• 在 vite.config.ts 中配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";  
import electron from "vite-plugin-electron/simple";
import optimizer from "vite-plugin-optimizer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      main: {
        entry: "electron/main.ts",
      },
      preload: {
        input: "electron/preload.ts",
      },
    }),
    // 加载ipcRenderer
    optimizer({
      electron: `const { ipcRenderer } = require("electron"); export { ipcRenderer};`,
    }),
  ],
});