在根目录下创建 electron 文件夹
创建 electron/main.js 文件：
// 导入模块
const { app, BrowserWindow ,Menu } = require('electron')
const path = require('path')// 创建主窗口
const createWindow = () => {const mainWindow = new BrowserWindow({width: 1440,height: 800,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的APIcontextIsolation: false, // 可以使用require方法enableRemoteModule: true, // 可以使用remote方法}})// 和自己本地vue项目启动的地址保持一致//mainWindow.loadURL(`http://localhost:5173`) //本地调试用这个mainWindow.loadURL(`https://ai.taxplus101.com`)
}
Menu.setApplicationMenu(null)
// 应用准备就绪，加载窗口
app.whenReady().then(() => {createWindow()// mac 上默认保留一个窗口app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})创建 electron/preload.js 文件：
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})修改 pakeage.json 文件：
添加以下内容：
"main":"electron/main.js"
"electron":"electron ."如果有： "type": "module" 一定要删除！！！！
否则会报错：
如果运行本地调试，需要先启动本地的 web调试 再启动本地 electron调试
打包相关：
一、安装 electron-builder
npm i electron-builder -D二、修改package.json文件
添加以下内容：
"electron:build": "electron-builder","build": {"appId": "com.demo.myApp", //包id 格式:com.xxx.项目名"productName": "myApp", // 项目名"copyright": "Copyright © 2024 <your-name>", // 版权信息"mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": true // 卸载应用清除用户缓存},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets", //静态文件资源获取目录"output": "dist_electron" // 打包位置,会新建到项目根目录}},
三、运行打包命令
如运行遇到无法创建地址错误，请使用管理员终端再次运行
npm run electron:build打包结果：
参考文章：将web项目打包成electron桌面端教程（二）vue3+vite+ts-CSDN博客