1、配置国内electron 镜像
.npmrc
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
2、创建vite项目
pnpm create vite
3、测试
pnpm dev-------------------查看 package.json 文件
4、配置vite.config.ts，让他运行直接打开
server: {
open: true,
port: 3211,
},
5、安装electron
pnpm i electron -D 安装electron
pnpm i electron-builder -D 安装编译器
6、配置electron
"start": "electron ."
pnpm i concurrently -D 可以同时启动多个，目的是开发环境加载网址，生产环境加载本地文件
创建main文件夹在src中，作为electron文件夹存放文职，创建main.js
const { app, BrowserWindow, screen } = require("electron"); // import path from "path"; const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, x: 0, y: 0, frame: false, // 隐藏窗口的顶部菜单栏和标题栏 webPreferences: { nodeIntegration: true, contextIsolation: false, }, // webPreferences: { preload: path.join(__dirname, "preload.ts") }, }); // 获取主屏幕的分辨率 const screenRect = screen.getPrimaryDisplay().bounds; console.log( `Screen Width: ${screenRect.width}, Screen Height: ${screenRect.height}` ); // 设置窗口大小和位置 win.setBounds({ x: 0, y: 0, width: screenRect.width, height: screenRect.height, }); // win.loadFile("index.html"); win.loadURL("http://127.0.0.1:3211"); }; app.whenReady().then(() => { createWindow(); app.on("activate", () => { if (BrowserWindow.getAllWindows().length == 0) { createWindow(); } }); app.on("window-all-closed", () => { if (process.platform !== "darwin") app.quit(); }); });
配置启动文件package.json
同时启动vite和electron
7. 打包
vite打包的时候打包到dist文件夹下，配置vite.config.ts中配置本地路径
8、把渲染进程创建一个文件放入里面，好区分
render
跳过更改，然后把index.htm更改下进入路径
根据执行命令加载本地文件还是网址
if (process.env.npm_lifecycle_event === "start") {
win.loadURL("http://127.0.0.1:3211");
win.webContents.openDevTools();
//快捷命令shift+ctrl+i
} else {
win.loadFile("dist/index.html");
}
