6 条命令跑通 Univer：从 pnpm install 到 Nginx 上线

6 条命令跑通 Univer从 pnpm install 到 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 是一套跑在 Web 端的电子表格、文档、幻灯片引擎很多人卡在本地怎么跑、线上怎么部署 Univer这两件事上。这篇就是解决它装依赖、起服务、打生产包、配 Nginx全程 6 条命令。读完后你会拥有一个带 gzip 压缩、可直接访问的 Univer 线上地址。一、先跑起来最小环境 首次启动环境要求就三样装好就能开工软件版本一句话说明Node.js 22.18JS 运行环境低于此版本构建会报错pnpm 11包管理器装 monorepo 依赖比 npm 快得多Git最新版拉代码用先拉代码git clone https://gitcode.com/GitHub_Trending/un/univer cd univer装依赖。这是个 monorepo一个仓库管几十个包pnpm 装完通常需要几分钟耐心等pnpm install起开发服务器pnpm dev跑完你应该看到终端输出本地地址默认 3000 端口浏览器打开就是一个能编辑的电子表格 demo改代码页面自动刷新不用手动刷新。如果报command not found: pnpm先执行npm i -g pnpm。二、仓库长什么样3 分钟定位关键目录. ├── common/ 共享配置和工具构建、ESLint、tailwind 等公共件 ├── docs/ 项目文档 ├── e2e/ 端到端测试用例 ├── examples/ Web 演示示例你跑 dev 起的就是它 ├── mockdata/ 开发用模拟数据 └── packages/ Univer 核心包和各功能插件60 个平时开发基本只碰两处想改页面效果、换 demo 逻辑看 examples/想改表格/文档/幻灯片的引擎行为看 packages/其他目录知道是干嘛的就行不用逐层翻。三、从本地到线上构建 Nginx 验证Univer 部署的本质很简单产物是纯静态文件任何静态服务器都能扛。先构建生产版本的 demo 站点产物落在examples/localpnpm build:demo构建完成后本地可以先验证一把效果和生产一致pnpm serve:e2e # 起在 examples/local默认 3000 端口没问题后把整个examples/local目录传到服务器scp -r examples/local useryour-server:/var/www/univerNginx 配置只需要这一小段核心是 SPA 回退 gziplocation / { try_files $uri $uri/ /index.html; # 前端路由回退到 index.html gzip on; # 开启压缩JS/CSS 体积能砍一半 gzip_types text/css application/javascript application/json; }改完配置记得sudo nginx -t再sudo systemctl reload nginxnginx -t报错一般是 path 写错了。上线后按这张清单逐项验证检查项预期结果不通过怎么办首页访问200 且表格正常渲染查 root 路径是否指向 examples/local刷新非根路由不出现 404确认 try_files 回退已配查看资源传输头有Content-Encoding: gzip检查 gzip_types 和文件大小阈值控制台报错无 404 资源查静态资源相对路径配置四、踩坑 进阶一张表说完问题现象解法内存泄漏长时间使用页面卡顿参照 docs/FIX_MEMORY_LEAK.md 排查单元测【免费下载链接】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），仅供参考