Electron 基本使用教程

以下以vue3为例结合electron实现跨平台开发

---

# 一、在项目根目录安装electorn-forge

按照如下命令安装electron-forge

npm install --save-dev electron @electron-forge/cli
npx electron-forge import

这一步会在你的项目中创建一个 electron 的基本目录结构，并配置打包命令。

# 二、新建main.js

在根目录下新建/electron/main.js

在main.js下复制如下代码

import { app, BrowserWindow } from 'electron';
import path from 'path';
import { fileURLToPath } from 'url';

// 解决 ES Module 中没有 __dirname 的问题
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

function createWindow () {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 可选，预加载脚本
    }
  });

  if (!app.isPackaged) {
    win.loadURL('http://localhost:5173'); // dev 模式加载 vite 前端
  } else {
    win.loadFile(path.join(__dirname, '../dist/index.html')); // prod 模式加载打包页面
  }
}

app.whenReady().then(() => {
  createWindow();
});

# 三、修改package.json

进入package.json文件，新增

"main": "electron/main.js",

注意scripts

"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},

# 四、开发测试流程

# 启动 Vite 前端
npm run dev

# 新开一个终端，启动 Electron
npm start

# 五、打包发布测试

先构建前端项目

npm run build

修改main.js

win.loadFile(path.join(__dirname, '../dist/index.html'));

打包

npm run package

会在 out/ 目录生成你的桌面可执行程序（比如 Windows 下是 .exe 文件）