资讯动态

Univer 生产部署实战:从 pnpm dev 到 Nginx 静态托管只需三步

发布时间:2026/9/12 7:01:07 来源:尧图企业网站定制
Univer 生产部署实战从 pnpm dev 到 Nginx 静态托管只需三步【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univerUniver 是一个全栈文档协作框架覆盖电子表格、文字处理和演示文稿同时支持浏览器与 Node.js 两端运行。读完这篇部署指南你可以独立完成本地跑通可交互 Demo、产出生产构建包、配置 Nginx 静态托管并上线全程命令可直接复制执行。工具链就位仓库声明的运行环境比社区常见版本要新先对齐再开工组件版本要求备注Node.js 22.18低于此版本构建会直接报错pnpm 11仓库锁定pnpm11.22.0建议用corepack enable让仓库自管版本Git任意近期版本构建时会读取 commit hash 注入产物# 安装 pnpm 并进入项目 npm i -g pnpm git clone https://gitcode.com/GitHub_Trending/un/univer cd univer pnpm install装完依赖后pnpm -v能跑、无 peer 冲突告警即可具体规范可对照 CONTRIBUTING.md。3 分钟跑通第一个 Demo启动命令就一条pnpm dev命令会先进入交互式多选界面让你挑选要加载的演示入口电子表格、文档、幻灯片等默认全选直接回车。构建完成后终端会打印Local server: http://localhost:3002端口被占用时会自动向上找空闲端口以终端实际输出为准。浏览器打开后是一个带完整工具栏的 Univer 电子表格pnpm dev底层是 esbuild watch 模式配置见 examples/esbuild.config.mts改代码秒级热更新适合边读源码边验证。目录速览. ├── packages/ 核心运行时与功能插件sheets-ui、engine-render、engine-formula 等 ├── presets/ 开箱即用的预装包组合preset-sheets-core 等 ├── examples/ 可运行的 Web 演示dev/build 的入口就在这里 ├── e2e/ Playwright 端到端与视觉对比测试 ├── common/ 共享的构建配置与工具 └── docs/ 架构与设计文档日常开发主要盯两个地方packages/下是你改动的核心代码examples/下是验证改动的演示入口。presets/决定了最终用户装到项目里的是哪一组插件理解它有助于裁剪不需要的功能。出包与本地预览构建分两层别混淆pnpm build # 构建 packages/ 与 presets/ 全部产物 pnpm build:demo # 构建演示站点静态文件输出到 examples/local pnpm serve:e2e # 用 serve 在 3000 端口托管 examples/localpnpm build:demo走的就是生产路径的 esbuild 打包ESM 代码分割 压缩产物落盘在examples/local这就是你最终要部署的目录。pnpm serve:e2e起来后访问http://localhost:3000效果应与 dev 环境一致但体积更小、加载更快。上线三步走Nginx 静态托管Univer 构建产物是纯静态文件Nginx 配置直接复制粘贴就行只需替换root路径server { listen 80; server_name univer.example.com; root /var/www/univer; index index.html; location / { try_files $uri $uri/ /index.html; } gzip on; gzip_types text/css application/javascript application/json image/svgxml; }部署步骤三步完成上传产物scp -r examples/local useryour-server:/var/www/univer放置配置并校验sudo cp univer.conf /etc/nginx/conf.d/ sudo nginx -t重载生效sudo systemctl reload nginxtry_files兜底到index.html保证前端路由刷新不 404如果产物有哈希指纹文件还可以顺手给js/、css/目录加上长缓存头。进阶玩法多实例同页同一页面渲染多份互不干扰的 Univer 实例各自独立的工作簿与渲染上下文官方示例在 examples/src/sheets-multi/核心是每实例传入独立container与data.id。Web Worker 分离计算把公式与渲染的重活挪出主线程避免大表滚动掉帧示例入口在 examples/src/preset-sheets-core-with-worker/接法是在宿主线程与 worker 线程各注册一次 preset。性能回归可用e2e/perf/下的 Playwright 用例做基准。踩坑速查Node 版本不足报错堆栈里出现require is not defined或 esbuild 版本告警时先确认node -v是否 22.18这步最容易卡住。内存泄漏排查长期运行内存持续增长时用pnpm dev:e2e起 E2E 模式服务在控制台执行E2EControllerAPI.loadAndRelease()反复加载释放工作簿配合 Chrome DevTools 的堆快照看Workbook实例是否被保留。高频根因订阅未 dispose、单例模块持有当前单元等已整理在 docs/FIX_MEMORY_LEAK.md直接对照排查路径走。想深入定制建议从 examples/src/main.tsx 的插件注册顺序看起再翻 packages/ 下对应功能的插件源码所有对外行为最终都能在那里找到实现。【免费下载链接】univerUniver is a full-stack framework for creating and editing spreadsheets / word processor / presentation on both web and server.项目地址: https://gitcode.com/GitHub_Trending/un/univer创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价