记录 vite - electron 调试

1. 环境准备

https://registry.npmmirror.com/binary.html

$ C:\Users\username\.npmrc

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

2.搭建项目

渲染进程 / 主进程 通信（IPC）

yarn create vite

# electron 27.0.3
# electron-builder 24.6.4
yarn add -D electron electron-builder vite-plugin-electron electron-devtools-installer

# make vite support ipcRenderer
# vite-plugin-electron-renderer 0.14.5
yarn add -D vite-plugin-electron-renderer

3.编写代码

$ /electron/index.ts

import path from 'path'
import { app, BrowserWindow } from 'electron'
 
// 定义全局变量，获取窗口实例
let win: BrowserWindow | null;

const createWindow = () => {
	win = new BrowserWindow({
		webPreferences: {
			nodeIntegration: true,
			devTools: false,
			contextIsolation: false,
			preload: path.join(__dirname, 'preload'),
		},
	});

	if (process.env.VITE_DEV_SERVER_URL) {
		win.loadURL(process.env.VITE_DEV_SERVER_URL);
		if (process.env.IS_DEV) {
			win.webContents.openDevTools();
		}
	} else {
        // Notes: /electron-builder.json - files
		const target = path.join(__dirname, '../dist/index.html');
		// win.loadFile(target);
		win.loadURL(`file://${target}`);
	}
};

// 初始化 - 在 Electron 完成初始化时触发
app.whenReady().then(() => {
	createWindow();
});

$ /electron/preload.ts

import os from 'os';
console.log('platform', os.platform());

$ /vite.config.ts

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import electron from 'vite-plugin-electron';
import electronRender from 'vite-plugin-electron-renderer';

export default defineConfig({
	plugins: [
		vue(),
		electron([
			{ entry: 'electron/index.ts' },
			{ entry: 'electron/preload.ts' },
		]),
		electronRender()
	],
});

4. 运行配置

$ /package.json

{
    "main": "dist-electron/index.js",
    "script": {
        "dev": "vite",
        "build": "vue-tsc && vite build",
        "electron:serve": "electron .",
        "electron:build": "yarn build && electron-builder"
    }
}

$ 运行 vite 默认命令即可 - 默认生成 dist-electron 目录

yarn dev 

5. 打包配置

$ /electron-builder.json

{
    "files": ["dist/**/*", "dist-electron/**/*"],
    "directories": {
        "output": "release"
    }
}

$ 运行命令

yarn electron:build

$ 打包成功，前置依赖

1. 配置 electron-builder-binaries_mirror 镜像；
2. 或在 https://registry.npmmirror.com/binary.html 找到对应版本压缩包下载到对应位置并进行解压；

$ C:\Users\username\AppData\Local\electron-builder\Cache

• nsis
  • nsis-version
  • nsis-resources-version
• winCodeSign
  • winCodeSign-version