一番折腾终于实现了最新版Electron35+vite6+Vue3+Element Plus官方组合运行

原创已于 2025-03-07 23:55:24 修改 · 2.2k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#electron #前端 #java

于 2025-03-07 00:34:20 首次发布

互联网同时被 2 个专栏收录

3 篇文章

订阅专栏

Electron

1 篇文章

订阅专栏

前言

在拿 Tauri2开发了两套PC桌面软件，对号直播助力和对号JoChat、JoCall后，还是决定改回到Electron，这次决定全新从零将各个所用框架用官方最新版进行重构。之所以改回到Electron，原因主要是Tauri兼容性问题调起来太费劲，而且学习成本太高，对于团队现有前端技术人员来讲难度较大，只能向现实妥协了。

这次新的任务要求比较紧，要将Duihao Jo! 快速升级为一套基于Ai的生产力工具，且要面向普通用户进行推广，对迭代频次要求较高，希望这次重选Electron+vite+Vue+Element Plus能带来非常好的体验。

概览

本篇文章主要告诉新手如何快速使用Electron+vite+Vue+Element Plus最新版组合执行开发。

技术栈

编码工具：Visual Studio Code
前端技术：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
UI组件库：element-plus^2.9.5
跨端框架：electron^35.0.0
Electron 打包工具：electron-builder^25.1.8
Electron Vite插件：vite-plugin-electron^0.29.0

运行结果

安装Element Plus、Vite样例

点击以下链接，按说明拉取 Element Plus Vite 模板：

GitHub - element-plus/element-plus-vite-starter: 🌰 A starter kit for Element Plus with Vite

或者执行git拉取，运行后，先测试 element-plus-vite-starter 是否正常。

git clone https://github.com/element-plus/element-plus-vite-starter
cd element-plus-vite-starter
npm i
npm run dev

安装Electron及相关插件

pnpm install electron 

pnpm install electron-builder

pnpm install vite-plugin-electron

pnpm install concurrently

创建electron启动程序

根目录下创建 electron.main.js 文件，用于electron启动主程序。

代码如下：

// electron 主程序
import path, { join } from 'node:path'
import { fileURLToPath } from 'node:url'
import { app, BrowserWindow } from 'electron'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'false'
// 屏蔽安全警告
function createWindow() {
  const win = new BrowserWindow({
    // 窗口图标
    icon: join(__dirname, 'resource/duihaojo.ico'),
    width: 800,
    height: 600,
    webPreferences: {
      // contextIsolation: false,
      // nodeIntegration: true,
      // preload: path.join(__dirname, 'preload.js')
    },
  })
  // 加载vue url视本地环境而定，如http://localhost:5173
  // win.loadURL('http://localhost:3000')
  // development模式
  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()
})

更改package.json配置

"scripts"上方增加一行：

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

"scripts"内dev、build变更为如下代码：

"dev": "concurrently \"vite\" \"wait-on tcp:3000 && electron .\"",

"build": "vite build && electron-builder",

更改vite.config.ts

... 

import electron from 'vite-plugin-electron'

...

export default defineConfig({
  base: './', // 根据需要调整，确保路径正确
  build: {
    outDir: 'dist_electron', // 将构建输出到 dist_electron 文件夹，以避免与 Electron 的 dist 混淆
    emptyOutDir: true, // 清空输出目录
  },
  server: {
    port: 3000,
    open: false, // 不自动打开浏览器
    host: true, // 允许局域网访问
  },
  define: {
    'process.env': {
    }, // 根据需要定义环境变量
  },
 
  ...

  plugins: [
    Vue(),
    electron({
      entry: 'electron.main.js',
    }),
    ...
  ]
...
})

....

创建env.development

代码如下：

VITE_DEV_SERVER_URL = http://localhost:3000
VITE_DEBUG = true

启动运行

pnpm run dev

完整代码

这里是本人写的空框架 eVVe，已对标题栏做了仿造VSCode风格的处理，你可以直接拿去使用，全免费：evve: 一个融合 electron + Vite + Vue3 + element plus 的跨端桌面程序集成开发框架

你也可以参考以下本人基于 Electron+vite+Vue+Element Plus （eVVe）开发的 Duihao Jo!包包：

Duihao Jo！: Duihao jo! 对号jo!包包，一个基于AI的新质生产力工具包。jo!包包为中文语态下的创作而生，集多模型对话、知识库管理、AI绘画、AI语音、翻译等功能于一体的多模态AI助手。无论是零技术用户还是技术研发者，都能在 Duihao Jo! 中找到适合自己的AI功能，以利用AI技术提升工作效率和创造力。