Vue3 + Vite Web项目 Electron 打包桌面应用程序

在根目录下创建  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博客