Ant Design + Electron 桌面应用实战：从搭建项目到打包发布的完整流程

Ant Design Electron 桌面应用实战从搭建项目到打包发布的完整流程【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design做一个能装到用户机器上、以窗口形式运行的业务工具Electron Ant Design 是最直接的一条路Electron 负责窗口和系统能力Ant Design 负责窗口里的界面。UI 层如果自己手写表单校验、表格、弹窗这些交互细节会吃掉大量时间而 Ant Design 的组件开箱就能用风格和行为都是一致的。照本文的步骤做完你会得到一个可运行的 Electron 登录表单应用带中文文案、主题配置并能打包出可安装的产物。方案速览三个模块各管什么这套组合的分工很清晰Electron 主进程负责创建窗口、调用系统能力文件、弹窗、托盘渲染进程就是一个 Chromium 窗口界面全部用 React Ant Design 来写Vite 负责开发服务器和构建主进程只是一份 Node 脚本不用额外配置。因为 antd 是 ES module 产物直接import { Button } from antd就会 tree shaking按需加载是默认行为不需要再装插件。后续想查细节官方快速上手入口在 docs/react/getting-started.zh-CN.md。核心操作流把 Ant Design 装进 Electron 窗口分工明确后先把项目跑起来。3分钟搭好 Vite Electron 基础工程# 用 Vite 创建 React 项目安装 antd 和 dayjsantd 日期组件的必需依赖 npm create vitelatest antd-desktop -- --template react cd antd-desktop npm install npm install antd dayjs npm install -D electron electron-builder在package.json里加两个配置main: main.js指定主进程入口再加 scripts{ main: main.js, scripts: { dev: vite build electron ., dist: vite build electron-builder } }跑npm run dev就能看到 Electron 窗口此时窗口里是 Vite 的默认页面。这里容易踩的坑窗口内容来自渲染进程的构建产物主进程和渲染进程是两个进程只装了 electron 却没 build 渲染层打开就是白屏。窗口起来了下一步要解决的是窗口里放什么。在渲染进程里用 Ant Design 写一个登录表单新建src/LoginForm.jsx表单校验全部交给rules配置不用手写 onChange 去拦import { Form, Input, Button, App } from antd; export default function LoginForm() { const { message } App.useApp(); return ( Form layoutvertical style{{ width: 360 }} onFinish{(v) message.success(登录${v.username})} Form.Item label用户名 nameusername rules{[{ required: true, message: 请输入用户名 }]} Input / /Form.Item Form.Item label密码 namepassword rules{[{ required: true, message: 请输入密码 }]} Input.Password / /Form.Item Button typeprimary htmlTypesubmit block登录/Button /Form ); }src/App.jsx改成渲染它import LoginForm from ./LoginForm.jsx; export default () LoginForm /;重新npm run dev窗口里就出现了带校验提示的登录表单提交后会弹出一条 message。每个组件的文档页都有一组演示代码可以直接抄遇到不认识的属性先去那里翻。这一步的意义是你已经把 Ant Design 跑进了 Electron 环境。桥接主进程与渲染进程只开最小接口面表单能渲染了但窗口和系统是割裂的——渲染进程默认没有 Node 能力这是好事也是安全边界。要暴露系统信息或本地功能走 preload contextBridge而不是放开nodeIntegration// preload.js只暴露白名单字段 const { contextBridge } require(electron); contextBridge.exposeInMainWorld(system, { platform: process.platform, arch: process.arch, });主进程main.js负责创建窗口并区分开发/生产两种加载地址// main.js const { app, BrowserWindow } require(electron); const path require(path); function createWindow() { const win new BrowserWindow({ width: 1000, height: 700, webPreferences: { preload: path.join(__dirname, preload.js) }, }); // 设了 VITE_DEV_SERVER_URL 就连 Vite 开发服务器否则读构建后的 dist process.env.VITE_DEV_SERVER_URL ? win.loadURL(process.env.VITE_DEV_SERVER_URL) : win.loadFile(path.join(__dirname, ../dist/index.html)); } app.whenReady().then(createWindow);之后渲染进程里就能直接window.system.platform。为什么坚持用contextBridge白名单因为暴露出去的 API 是可枚举、可审查的一旦整体开启nodeIntegration等于给页面里任何脚本开了本地执行权限。用 ConfigProvider 配好全局语言与主题现在界面还是英文默认文案DatePicker 面板、空状态提示全都不对配色也不是你想要的品牌色。这两个问题用ConfigProvider一次解决// src/main.jsx import React from react; import { createRoot } from react-dom/client; import { ConfigProvider, App as AntApp, theme } from antd; import zhCN from antd/locale/zh_CN; import dayjs/locale/zh-cn; import App from ./App.jsx; createRoot(document.getElementById(root)).render( ConfigProvider locale{zhCN} theme{{ token: { colorPrimary: #1677ff }, algorithm: theme.defaultAlgorithm }} AntApp App / /AntApp /ConfigProvider, );注意两层嵌套ConfigProvider最外层管语言和主题里面的App组件这里别名 AntApp避免和你的 App 重名负责让message、Modal这类静态调用也能拿到上下文后面排障章节会再提到它。token 和 algorithm 的组合方式详见 docs/react/customize-theme.zh-CN.md。用 electron-builder 打包出可安装产物# 先出目录检查产物结构 npx electron-builder --dir # 再打正式安装包按你所在平台选参数 npx electron-builder --win # 或 --mac / --linux跑完在dist_electron目录下就是安装包。图标和 product name 在package.json的build字段里配electron-builder 会自动读取。这里容易踩的坑Windows 和 macOS 的签名是两回事内部分发如果不签名用户打开时会被系统拦一道团队内先用自签证书跑通流程。进阶与排障跑通后最常撞的三个问题message / Modal 静态方法不受主题控制。如果你直接写message.success(...)发现ConfigProvider里配的主题和语言不生效这不是配置写错——静态方法内部用ReactDOM.render新建了 React 树不走你当前这棵树的 context。解法是用 App 组件包住应用改从App.useApp()或Modal.useModal()拿实例用法在 components/app/。产物体积比预期大。别去装 babel-plugin-importantd 靠 ES module 天然按需装了这个插件反而可能引出不一致。产物还是大就先跑 bundle 分析器找真正的重量级dayjs 全量插件、图片资源、或误引入的日期大库通常就是它们。开发时正常打包后白屏。这类问题九成出在主进程加载地址开发态该走 Vite 开发服务器地址生产态该走 dist 的file://路径检查main.js里那个分支有没有选对。还解不开的话对着 docs/react/use-with-vite.zh-CN.md 里的完整工程样例逐项比对目录结构和入口配置。下一步往哪里继续挖整套东西的本质是三件事各归各位Electron 管窗口和系统能力Ant Design 管界面Vite 管构建登录表单能在窗口里跑、能配中文和主题之后工程骨架就完成了。接下来打开 components/index.ts 看组件全集挑 Table、DatePicker、Drawer 这类你业务里用得上的组件逐个搬进应用想上暗色模式或一整套品牌色就把定制主题文档里 algorithm 和 Component Token 两节读透那是桌面应用视觉定制的自然延伸。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考