用 Electron + Vite + Vue3 搭建桌面端项目：Electron 基础配置（一）

点击关注公众号，“技术干货”及时达！

Electron 是基于 Chromium 和 Node.js 实现的，前端程序员可以使用 JavaScript、HTML 和 CSS 知识快速构建跨平台的桌面应用。不需要本地开发原生的经验，即可在 Windows、macOS 和 Linux 平台上运行应用。

笔者最近在学习 Electron 并且用它工作，积累了一些经验，并准备做一个桌面端工具，打包运行到 Windows、macOS 和 Linux 平台上。

创建项目

使用 Vue3 和 Vite 创建 Vue 项目并引入 Electron。

1. 创建 Vue 项目

npm create vite@latest electron-desktop-tool

2. 进入项目并运行

cd electron-desktop-tool
npm install
npm run dev

此时可以看到 Vue 项目已经启动，下一步我们将引入 Electron。

目录结构

在引入 Electron 之前，这是目前的目录结构。

安装 Electron

在安装 Electron 之前需要先配置一下安装源。在根目录下新建 .npmrc 文件，内容如下：

strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

3. 安装 Electron 相关插件

npm install -D electron
npm install -D electron-builder
npm install -D electron-devtools-installer
npm install -D vite-plugin-electron

创建项目入口——主进程

新建一个 src-electron 文件夹，用来写 Electron 相关代码，并在它下面创建 main.js 文件，用于编写主进程代码。

// src-electron/main.js
const { app, BrowserWindow } = require('electron');
const { join } = require('path');

// 禁用安全警告
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

// 创建浏览器窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL);
    win.webContents.openDevTools(); // 开启调试台
  } else {
    win.loadFile(join(__dirname, '../dist/index.html'));
  }
};

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

配置插件入口

在 vite.config.ts 中配置 vite-plugin-electron 插件入口：

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

export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: './src-electron/main.js', // 主进程入口文件
    }),
  ],
  server: {
    port: 3000, // 开发服务器端口
  },
});

配置 package.json

在 package.json 中删除 "type": "module"，并配置 main 字段为 Electron 主进程文件路径：

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

启动 Electron 项目

运行以下命令启动项目：

npm run dev

可以看到弹出一个 Electron 窗口，表明一个基本的 Electron 应用已经搭建成功。

修改标题和图标

1. 修改标题

在主进程中创建窗口时可以自定义窗口标题：

const win = new BrowserWindow({
  width: 800,
  height: 600,
  title: '我的应用', // 自定义窗口标题
});

2. 修改图标

通过 icon 属性设置窗口和任务栏图标：

const { join } = require('path');
const win = new BrowserWindow({
  width: 800,
  height: 600,
  title: '我的应用',
  icon: join(__dirname, '../public/logo.ico'), // 自定义图标
});

打包

1. 配置打包命令

在 package.json 中添加打包命令和相关配置：

"scripts": {
  "electron:build": "vite build && electron-builder"
}

在 build 字段中配置打包信息：

"build": {
  "productName": "ElectronDeskTopTool",
  "appId": "dyy.dongyuanwai",
  "copyright": "dyy.dongyuanwai © 2024",
  "compression": "maximum",
  "asar": true,
  "directories": {
    "output": "release/"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "shortcutName": "ElectronDeskTopTool"
  },
  "win": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
  },
  "mac": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
  },
  "linux": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
  }
}

2. 运行打包命令

npm run electron:build

可以看到生成了指定的打包文件输出目录，包含安装包文件。