当前位置：首页 > news >正文

Vue3 + Vite + Element Plus web转为 Electron 应用

news 2025/9/10 5:48:54

如何在vue3 + Vite + Element Plus搭好的架构下转为 electron应用呢？

第一步：安装 electron相关依赖

npm install electron electron-builder concurrently cross-env --save-dev

本来想学习electron框架 web如何转 electron框架做个桌面应用，结果卡在了安装依赖有点无语。。。一开始以为是npm安装太慢卡死，然后尝试用淘宝镜像cnpm安装、npm版本升级等等一顿操作，最后是安装成功了，但是npm list electron查看版本信息各种兼容报。。

怀疑是electron版本37.2.6版本太高了，把electron降到22还是各种报错。。。

解决修改镜像源：

npm config edit //打开npm配置文件

在配置文件中添加

electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

添加完成后执行安装命令：

npm install electron electron-builder concurrently cross-env --save-dev

各种踩坑后总算是安装成功了~

第二步：配置 Electron 主进程

创建 electron文件夹

创建:main.js

const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('path')let mainWindowfunction createWindow() {mainWindow = new BrowserWindow({ width: 1200,height: 800,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: false,contextIsolation: true}})//创建空菜单 - 菜单栏隐藏但快捷键可用const emptyMenu = Menu.buildFromTemplate([])Menu.setApplicationMenu(emptyMenu)// 修改生产环境加载逻辑
if (process.env.NODE_ENV === 'development') {mainWindow.loadURL('http://localhost:8888') //确保自己的端口一致，不然运行调试或打包无效
} else {// 确保正确加载打包后的文件const indexPath = path.join(__dirname, '../dist/index.html')mainWindow.loadFile(indexPath).catch(err => {console.error('加载失败:', err)// 备用加载方式mainWindow.loadURL(`file://${indexPath}#/`)})
}mainWindow.on('closed', () => {mainWindow = null})
}// 处理渲染进程的快捷键事件
ipcMain.on('reload-app', () => {mainWindow.reload()
})ipcMain.on('toggle-devtools', () => {mainWindow.webContents.toggleDevTools()
})ipcMain.on('force-reload', () => {mainWindow.webContents.reloadIgnoringCache()
})app.on('ready', createWindow)app.on('window-all-closed', () => {if (process.platform !== 'darwin') { app.quit()}
})app.on('activate', () => {if (mainWindow === null) {createWindow()}
})

创建：preload.js

const { contextBridge } = require('electron')contextBridge.exposeInMainWorld('electron', {})

第三步：修改package.json

{"name": "my-vue-electron-app","private": true,"version": "0.0.1","main": "electron/main.js","scripts": {"dev": "concurrently -k \"cross-env NODE_ENV=development vite\" \"cross-env NODE_ENV=development electron .\"","build": "vite build && electron-builder","preview": "vite preview","electron:serve": "electron ."},"build": {"appId": "com.example.myvueelectronapp","productName": "你的管理平台","directories": {"output": "build"},"files": ["dist/**/*","electron/**/*","!node_modules/**/*"],"win": {"target": "nsis","icon": "public/02.ico"},"mac": {"target": "dmg","icon": ""},"linux": {"target": "AppImage","icon": ""}},

注意图标icon格式和规范大小，npm run dev，调试不会影响但是打包会提示报错

第四步：修改 Vite 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({base: './',server: {open: true,host: "0.0.0.0",https: false,//端口号port: 8082,hmr: true,proxy: {'/api': {target: '0', ws: true,changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},build: {outDir: 'dist',emptyOutDir: true,}
})

第五步： npm run dev 调试

第六步：打包electron npm run build

完成打包后双击打开调试版本与.exe应用

发现登录后路由无法跳转了，原因是Cookies在桌面无效；我项目toke是存在Cookies里面，造成登录路由无法跳转。。。

解决把存储在Cookies数据存储改成 localStorage或sessionStorage 然后重新登录就ok

第七步：隐藏或重置操作导航栏

1.隐藏导航栏,保留调试效果:

修改main.js

const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('path')let mainWindowfunction createWindow() {mainWindow = new BrowserWindow({ width: 1200,height: 800,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: false,contextIsolation: true}})//创建空菜单 - 菜单栏隐藏但快捷键可用const emptyMenu = Menu.buildFromTemplate([])Menu.setApplicationMenu(emptyMenu)// 修改生产环境加载逻辑
if (process.env.NODE_ENV === 'development') {mainWindow.loadURL('http://localhost:8888')
} else {// 确保正确加载打包后的文件const indexPath = path.join(__dirname, '../dist/index.html')mainWindow.loadFile(indexPath).catch(err => {console.error('加载失败:', err)// 备用加载方式mainWindow.loadURL(`file://${indexPath}#/`)})
}mainWindow.on('closed', () => {mainWindow = null})
}// 处理渲染进程的快捷键事件
ipcMain.on('reload-app', () => {mainWindow.reload()
})ipcMain.on('toggle-devtools', () => {mainWindow.webContents.toggleDevTools()
})ipcMain.on('force-reload', () => {mainWindow.webContents.reloadIgnoringCache()
})app.on('ready', createWindow)app.on('window-all-closed', () => {if (process.platform !== 'darwin') { app.quit()}
})app.on('activate', () => {if (mainWindow === null) {createWindow()}
})

修改preload.js

const { contextBridge, ipcRenderer } = require('electron')// 安全地暴露 API 给渲染进程
contextBridge.exposeInMainWorld('electron', {// 可以在这里添加需要暴露的 API
})// 监听键盘事件
document.addEventListener('keydown', (event) => {// Ctrl/Cmd + R: 刷新if ((event.ctrlKey || event.metaKey) && event.key === 'r') {event.preventDefault()ipcRenderer.send('reload-app')}// F12: 开发者工具if (event.key === 'F12') {event.preventDefault()ipcRenderer.send('toggle-devtools')}// Ctrl/Cmd + Shift + R: 强制刷新if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'R') {event.preventDefault()ipcRenderer.send('force-reload')}
})

成功去掉导航栏，快捷键也可调试