说明
本文介绍一下 Electron + Vue3 的整合的中级操作。
实现的效果是 ：
1、一个正常的Vue3项目；
2、整合加入 Electron 框架 ：
开发时只执行一条命令，启动 vue 项目 后 再启动 electron；
支持 electron 的js 文件修改的热更新，无需重新启动服务。
注意 ： 本文中的electron 使用的是 js 的方式进行开发的。
步骤一：创建vue3项目
常规操作，不再赘述。
# 创建项目
npm create vue@latest
# 进入到项目目录
cd <your project dir>
# 安装依赖
npm install
# 启动访问
npm run dev
正经的vue项目启动成功！
此时的项目目录结构如下：是一个标准的vue3的项目结构
projectName
| -- node_modules # 依赖包的位置
| -- public # 一些静态资源
| -- src # 源文件目录
| -- .gitignore # git忽略配置文件
| -- env.d.ts
| -- index.html # vue主页面
| -- package.json # 项目配置文件
| -- tsconfig.json # typescript 配置文件
| -- vite.config.ts # vite 配置文件
步骤二 ：引入Electron
1、安装Electron
# 安装Electron
npm install --save-dev electron
2、项目根目录下创建一个electron的工作目录
# 进入到项目的根目录
cd <your project name>
# 创建electron目录
mkdir electron
3、在electron目录下创建主进程 electronMain.js 文件
主要干了两个事儿 ： 1.创建主窗口；
2.接收【插件】参数，加载vue的页面进来。
此时，窗口加载的页面是动态的，根据【步骤三】定义的插件传过来的参数进行加载。
/**
* electron 的主进程
*/
// 导入模块
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
// 创建主窗口
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
})
// ********** 核心操作： 加载当前vue 的地址 **********
let devUrl = process.argv[2]
if(devUrl){ // 存在路径，则证明是开发环境，直接加载
win.loadURL(devUrl)
}else{ // 不存在路径，则我们先默认加载百度吧
win.loadURL('https://www.baidu.com')
}
}
// 应用准备就绪，加载窗口
app.whenReady().then(() => {
createWindow()
// mac 上默认保留一个窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
console.log('--- app ready ---')
})
// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
步骤三 ： 自定义插件（重点）
要想实现一键启动 vue3 项目 和 electron 项目，并且 electron 自动加载 vue3 的页面，
可以通过这个自定义插件的方式进行实现。
1、新建插件目录
# 进入到项目的根目录
cd <your project name>
# 创建插件目录
mkdir plugins
2、新建插件文件
插件文件名称为 ：
vite.electron.dev.ts
插件的主要功能 ：
1、监听 vite 服务启动；
2、组装 服务器的地址；
3、使用 spawn 的方式，将组装的地址传递给electron主进程；
4、监听electron 的文件变动，实现热更新。
插件的内容基本确定，可以直接copy使用。
// 开发环境的自定义插件
import type { Plugin } from "vite";
import type { AddressInfo } from "net";
// 导入子进程
import {ChildProcess, spawn} from 'child_process'
// 导入electron命令
import electron from 'electron'
// 导入 文件操作
import fs from 'fs'
// 自定义的插件的逻辑
export const ElectronDevPlugin = ():Plugin =>{
return {
name:'electron-dev-plugin',
//配置服务的钩子
configureServer(server){
server.httpServer?.on('listening',()=>{
let addressInfo = server.httpServer?.address() as AddressInfo
const devUrl = `http://localhost:${addressInfo.port}`
console.log('服务的完整地址 ： ',devUrl)
// 进程发送到electron的进程中
let electronProcess = spawn(electron,['electron/electronMain.js',devUrl],{ stdio: 'inherit' }) as ChildProcess
// 增加 electron 的热启动功能
fs.watch('electron',()=>{
console.log(' electron 目录中的文件发生改变了')
electronProcess.kill()
electronProcess = spawn(electron,['electron/electronMain.js',devUrl],{ stdio: 'inherit' }) as ChildProcess
})
})
}
}
}
3、在vite配置文件中引入插件
vite 的配置文件是
vite.config.mts
在该文件中添加上述自定义的插件。
文件内容节选如下：
import { defineConfig } from 'vite'
// 导入自定义的插件
import {ElectronDevPlugin} from './plugins/vite.electron.dev'
export default defineConfig({
// 插件配置
plugins: [
...
ElectronDevPlugin()
],
// 。。。其他的配置内容
})
4、在tsconfig配置文件中添加包含
添加自定义插件 ts 文件的包含配置，否在，在
vite.config.mts文件中引入时有错误提示。
tsconfig的配置文件是 ：tsconfig.node.json
主要修改的内容如下：
{
"extends": "@tsconfig/node20/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"plugins/**/*" // 就是添加了这一行
],
// 其他的常规配置
}
步骤四 ： 修改 package.json 文件脚本
主要是 ：
1.配置 启动脚本 , 此时实际上就是一个普通的 vite 命令
启动完成 vue 项目后，通过我们自定义的插件，再启动electron服务；
4.删除文件中的 type:“module” 行，否则会有一个警告！
{
"name": "electron03vuetest01",
"version": "1.0.0",
"private": true,
"scripts": {
"devall":"vite", // 我们自定义的脚本命令，一键启动
// 其他的脚本命令 。。。
},
// 其他的依赖 等配置信息
}
步骤五 ： 启动测试
在命令行中，直接执行命令 ：
npm run devall
效果：
1、vite 正常启动 vue3 项目
2、electron 启动成功，窗体展示成功。
启动日志如下 ：
> electron03vuetest01@1.0.0 devall
> vite
服务的完整地址 ： http://localhost:5178
VITE v5.2.9 ready in 331 ms
➜ Local: http://localhost:5178/
➜ Network: use --host to expose
➜ press h + enter to show help
--- app ready ---
运行效果 ： electron 启动成功且加载vue页面成功！
