3 步把 RuoYi-Vue3 搬上桌面Electron 跨平台桌面应用改造实战【免费下载链接】RuoYi-Vue3:tada: (RuoYi)官方仓库 基于SpringBootSpring SecurityJWTVue3 Vite、Element Plus 的前后端分离权限管理系统项目地址: https://gitcode.com/GitHub_Trending/ruo/RuoYi-Vue3RuoYi-Vue3 是一套基于 Vue3 Vite Element Plus 的权限管理系统。放到内网部署后业务方经常提要个应用图标、要系统托盘常驻、要文件直接拖进窗口上传这类需求。这篇文章就用 Electron 把这个现成的 Vue3 项目改造成 Windows / macOS / Linux 跨平台桌面应用加两个文件、补两个脚本业务代码一行不动。01 为什么要把 Web 后台搬进桌面这节回答一个问题已经在跑的 Web 后台套一层桌面壳到底图什么。真实项目里踩过的三类痛点业务方要一个应用。内网里后台靠书签 标签页访问容易丢、容易误关桌面图标加开机入口更符合企业软件的使用习惯。数据不出办公网。合规要求后台不上公网终端又常被统一管理、浏览器功能被裁剪。桌面形态方便统一管控安装、卸载和授权例如车间、财务这类部门的终端往往只保留内网白名单。Web 做不了桌面独有的事。托盘常驻、全局快捷键唤起窗口、本地文件直接拖进上传区这三样浏览器都提供不了。选 Electron 而不是 PWA 或 Tauri理由很直接项目本身就是 Vue3 技术栈Electron 同为 JS 生态学习成本几乎为零PWA 摸不到系统托盘和全局快捷键Tauri 包体更小但 Rust 工具链的入门成本高打包和自动更新生态的成熟度也差半档。再加上 Electron 的调试工具就是熟悉的 DevTools排错体验和 Web 端完全一致。能力Web 后台Electron 桌面应用内网驻留形态书签 标签页图标、托盘、全局快捷键本地文件交互受沙箱限制直接拖进窗口系统集成无托盘、菜单、通知分发形态URL各平台安装包02 桌面化路线图Vue3 工程到安装包的 4 层这节先把改造路径摆清楚避免改一处跑一处的混乱。每一层的分工主进程负责建窗口、按开发/生产双模式加载资源、管理托盘菜单preload 脚本是两个世界之间唯一的通道页面能调到的只有它暴露的函数渲染进程侧的登录、权限菜单、动态路由逻辑与 Web 版完全一致。也就是说桌面化的成本全部集中在壳这一层业务层零改动。03 三步落地这节给出最小可用文件集与配置按主进程 → 安全桥 → 脚本三步走。3.1 Electron 主进程怎么配这一步解决窗口创建与双模式加载同时把安全默认值钉死。新建 electron/main.cjs 作为主进程入口渲染进程不允许碰 Node APIcontextIsolation: true和nodeIntegration: false直接从窗口参数里写死加载分两种模式——开发指向本地 vite 端口生产直接读 dist。再注意一个细节本项目 package.json 里type: module所以入口文件命名main.cjsrequire才能正常用。// electron/main.cjs const { app, BrowserWindow } require(electron) const path require(path) function createWindow() { const win new BrowserWindow({ width: 1280, height: 800, webPreferences: { preload: path.join(__dirname, preload.js), contextIsolation: true, nodeIntegration: false } }) app.isPackaged ? win.loadFile(path.join(__dirname, ../dist/index.html)) : win.loadURL(http://localhost:80) } app.whenReady().then(createWindow)验证跑起 electron 后打开 DevTools登录页应正常加载Console 里window.electronAPI不再是 undefined。主进程再补两个常规行为即可非 macOS 下所有窗口关闭即退出macOS 激活事件里重建窗口。3.2 preload 安全桥写法【免费下载链接】RuoYi-Vue3:tada: (RuoYi)官方仓库 基于SpringBootSpring SecurityJWTVue3 Vite、Element Plus 的前后端分离权限管理系统项目地址: https://gitcode.com/GitHub_Trending/ruo/RuoYi-Vue3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
3 步把 RuoYi-Vue3 搬上桌面：Electron 跨平台桌面应用改造实战
3 步把 RuoYi-Vue3 搬上桌面Electron 跨平台桌面应用改造实战【免费下载链接】RuoYi-Vue3:tada: (RuoYi)官方仓库 基于SpringBootSpring SecurityJWTVue3 Vite、Element Plus 的前后端分离权限管理系统项目地址: https://gitcode.com/GitHub_Trending/ruo/RuoYi-Vue3RuoYi-Vue3 是一套基于 Vue3 Vite Element Plus 的权限管理系统。放到内网部署后业务方经常提要个应用图标、要系统托盘常驻、要文件直接拖进窗口上传这类需求。这篇文章就用 Electron 把这个现成的 Vue3 项目改造成 Windows / macOS / Linux 跨平台桌面应用加两个文件、补两个脚本业务代码一行不动。01 为什么要把 Web 后台搬进桌面这节回答一个问题已经在跑的 Web 后台套一层桌面壳到底图什么。真实项目里踩过的三类痛点业务方要一个应用。内网里后台靠书签 标签页访问容易丢、容易误关桌面图标加开机入口更符合企业软件的使用习惯。数据不出办公网。合规要求后台不上公网终端又常被统一管理、浏览器功能被裁剪。桌面形态方便统一管控安装、卸载和授权例如车间、财务这类部门的终端往往只保留内网白名单。Web 做不了桌面独有的事。托盘常驻、全局快捷键唤起窗口、本地文件直接拖进上传区这三样浏览器都提供不了。选 Electron 而不是 PWA 或 Tauri理由很直接项目本身就是 Vue3 技术栈Electron 同为 JS 生态学习成本几乎为零PWA 摸不到系统托盘和全局快捷键Tauri 包体更小但 Rust 工具链的入门成本高打包和自动更新生态的成熟度也差半档。再加上 Electron 的调试工具就是熟悉的 DevTools排错体验和 Web 端完全一致。能力Web 后台Electron 桌面应用内网驻留形态书签 标签页图标、托盘、全局快捷键本地文件交互受沙箱限制直接拖进窗口系统集成无托盘、菜单、通知分发形态URL各平台安装包02 桌面化路线图Vue3 工程到安装包的 4 层这节先把改造路径摆清楚避免改一处跑一处的混乱。每一层的分工主进程负责建窗口、按开发/生产双模式加载资源、管理托盘菜单preload 脚本是两个世界之间唯一的通道页面能调到的只有它暴露的函数渲染进程侧的登录、权限菜单、动态路由逻辑与 Web 版完全一致。也就是说桌面化的成本全部集中在壳这一层业务层零改动。03 三步落地这节给出最小可用文件集与配置按主进程 → 安全桥 → 脚本三步走。3.1 Electron 主进程怎么配这一步解决窗口创建与双模式加载同时把安全默认值钉死。新建 electron/main.cjs 作为主进程入口渲染进程不允许碰 Node APIcontextIsolation: true和nodeIntegration: false直接从窗口参数里写死加载分两种模式——开发指向本地 vite 端口生产直接读 dist。再注意一个细节本项目 package.json 里type: module所以入口文件命名main.cjsrequire才能正常用。// electron/main.cjs const { app, BrowserWindow } require(electron) const path require(path) function createWindow() { const win new BrowserWindow({ width: 1280, height: 800, webPreferences: { preload: path.join(__dirname, preload.js), contextIsolation: true, nodeIntegration: false } }) app.isPackaged ? win.loadFile(path.join(__dirname, ../dist/index.html)) : win.loadURL(http://localhost:80) } app.whenReady().then(createWindow)验证跑起 electron 后打开 DevTools登录页应正常加载Console 里window.electronAPI不再是 undefined。主进程再补两个常规行为即可非 macOS 下所有窗口关闭即退出macOS 激活事件里重建窗口。3.2 preload 安全桥写法【免费下载链接】RuoYi-Vue3:tada: (RuoYi)官方仓库 基于SpringBootSpring SecurityJWTVue3 Vite、Element Plus 的前后端分离权限管理系统项目地址: https://gitcode.com/GitHub_Trending/ruo/RuoYi-Vue3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
