NiceFish桌面端开发Electron集成与打包部署完整指南【免费下载链接】NiceFishNiceFish美人鱼 是一个系列项目目标是示范前后端分离的开发部署模式包括: 浏览器环境、移动端环境、Electron 环境后端有两个版本SpringBoot 版本和 SpringCloud 版本。请不要吝惜你的⭐️ Star ⭐️星星越多动力越足。下一个版本会引入 Angular 最新的 signal 特性。项目地址: https://gitcode.com/gh_mirrors/ni/NiceFishNiceFish美人鱼是一个系列项目目标是示范前后端分离的开发部署模式包括浏览器环境、移动端环境和Electron桌面环境。本文将详细介绍如何为NiceFish项目集成Electron并完成打包部署帮助开发者快速构建跨平台桌面应用。准备工作环境搭建与项目克隆在开始Electron集成之前需要确保开发环境已满足以下要求Node.js 14.x或更高版本npm 6.x或更高版本Angular CLI 16.x项目已使用的版本首先克隆项目代码库git clone https://gitcode.com/gh_mirrors/ni/NiceFish cd NiceFish安装项目依赖npm installElectron集成从Web到桌面应用的转变安装Electron核心依赖虽然项目package.json中未直接包含Electron依赖但我们可以通过以下命令添加npm install electron --save-dev npm install electron-builder --save-dev创建Electron主进程文件在项目根目录创建electron-main.js文件作为Electron应用的入口点const { app, BrowserWindow } require(electron); const path require(path); function createWindow() { // 创建浏览器窗口 const mainWindow new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true, contextIsolation: false } }); // 加载Angular构建的index.html mainWindow.loadFile(path.join(__dirname, dist/NiceFish/browser/index.html)); // 打开开发者工具 mainWindow.webContents.openDevTools(); } app.whenReady().then(() { createWindow(); app.on(activate, function () { if (BrowserWindow.getAllWindows().length 0) createWindow(); }); }); app.on(window-all-closed, function () { if (process.platform ! darwin) app.quit(); });配置package.json在package.json中添加Electron相关脚本和配置main: electron-main.js, scripts: { electron:start: ng build electron ., electron:package: ng build --prod electron-builder }, build: { appId: com.nicefish.app, productName: NiceFish, directories: { output: electron-dist }, files: [ dist/**/*, electron-main.js ], win: { target: nsis, icon: src/assets/imgs/nice-fish.png }, mac: { target: dmg, icon: src/assets/imgs/nice-fish.png }, linux: { target: deb, icon: src/assets/imgs/nice-fish.png } }图1NiceFish应用在桌面环境中的运行界面开发与调试Electron与Angular的协同工作运行Electron开发环境执行以下命令启动Electron应用并加载Angular开发服务器# 首先启动Angular开发服务器 npm start # 然后在新终端启动Electron npm run electron:start调试技巧主进程调试在package.json中添加调试脚本scripts: { electron:debug: electron --inspect5858 . }渲染进程调试直接使用Chrome开发者工具Electron已集成Chrome的DevTools图2Electron应用调试界面可同时调试主进程和渲染进程打包部署生成跨平台安装包构建生产版本执行以下命令构建Angular应用并打包Electronnpm run electron:package打包完成后可在electron-dist目录下找到各平台的安装包Windows.exe或.nsis安装程序macOS.dmg磁盘镜像Linux.deb或.rpm安装包自定义打包配置通过修改package.json中的build配置可以自定义打包选项更改应用图标替换icon字段指向的图片文件修改输出目录调整directories.output配置添加应用元数据设置copyright、description等字段图3Electron打包后的文件结构分析常见问题解决依赖冲突问题如果遇到Electron与Angular依赖冲突可尝试# 清除npm缓存 npm cache clean --force # 删除node_modules并重新安装 rm -rf node_modules package-lock.json npm install跨平台兼容性Windows确保安装了Visual Studio Build ToolsmacOS需要Xcode命令行工具Linux安装必要依赖libgtk-3-dev、libnotify-dev等性能优化减小应用体积# 分析打包体积 npm run bundle-report优化启动速度减少主进程初始化工作使用app.on(ready)事件延迟加载非关键资源图4应用性能分析报告帮助识别优化点总结与后续扩展通过本文的指南你已经成功将Electron集成到NiceFish项目中并完成了桌面应用的打包部署。NiceFish作为一个示范前后端分离模式的项目未来还将引入Angular最新的signal特性进一步提升应用性能。后续可以考虑的扩展方向实现自动更新功能集成系统通知和托盘图标添加文件系统交互功能优化多窗口管理希望本文能帮助你顺利构建自己的Electron桌面应用如有任何问题欢迎查阅项目文档或提交issue。【免费下载链接】NiceFishNiceFish美人鱼 是一个系列项目目标是示范前后端分离的开发部署模式包括: 浏览器环境、移动端环境、Electron 环境后端有两个版本SpringBoot 版本和 SpringCloud 版本。请不要吝惜你的⭐️ Star ⭐️星星越多动力越足。下一个版本会引入 Angular 最新的 signal 特性。项目地址: https://gitcode.com/gh_mirrors/ni/NiceFish创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考