Univer 部署指南:电子表格、文档与幻灯片编辑器,如何从本地开发一路推到生产上线
Univer 部署指南电子表格、文档与幻灯片编辑器如何从本地开发一路推到生产上线【免费下载链接】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 或 Node 服务。按这篇文章走一遍你可以完成四件事本地把示例跑起来、打出生产静态包、用 Nginx 部署上线、上线后做一遍自检。 前置条件开工前把三样东西备好版本低于下表的会直接卡住安装或构建工具版本要求用途Node.js 22.18跑仓库的构建与开发脚本pnpm 11安装 workspace 依赖仓库锁定 pnpm 11.22.0Nginx任一稳定版生产环境托管静态文件本地阶段用不到版本要求的出处见 CONTRIBUTING.md。 第一次跑起来四步命令1. 拉代码把仓库完整拉到本地并进入目录一条命令git clone https://gitcode.com/GitHub_Trending/un/univer cd univer执行完ls能看到packages/、examples/、presets/等顶层目录说明仓库拉下来了。2. 装依赖仓库是 pnpm workspacepackages/下四十多个包都要装这条命令一次处理pnpm install跑完没有红色报错、各子包目录生成了node_modules依赖就算就位。中间如果提示 Node 版本过低先升级 Node 再重跑。3. 起服务开发服务器是 watch 模式改代码自动增量编译pnpm dev终端最后会打印Local server: http://localhost:3002。默认监听 3002 端口若被占用会自动顺延到下一个可用端口以终端实际打印的地址为准。4. 确认成功浏览器打开终端给出的地址。能看到一个可操作的电子表格演示页——工具栏、公式栏、单元格编辑都可用——环境就算跑通了改代码后页面会自动刷新。️ 代码地图想改什么就去哪个目录. ├── packages/ 全部核心库与插件sheets表格模型、engine-render渲染引擎、engine-formula公式引擎、docs、slides 等 ├── presets/ 预设包把一组功能组合成一个导入接入方直接引用 ├── examples/ Web 演示工程就是上面一直在跑的那个站点 ├── common/ 共享工程配置构建、ESLint、单测配置 ├── e2e/ Playwright 端到端测试 ├── docs/ 项目文档与架构图 └── tests/ 跨包集成测试公式等改界面找 packages/sheets-ui/改数据模型和命令找packages/sheets/或packages/core/改演示页本身去 examples/src/。想理解分层再动手的话先看这张架构图控制器 → 服务 → Univer 实例的调用链一目了然。 打生产包并本地预览演示站的产物用 esbuild 打一条命令pnpm build:demo执行后所有演示页会被编译成纯静态文件输出到examples/local/outdir 配置在 examples/esbuild.config.mts。注意区分根目录的pnpm build是构建发布用的univerjs/*各库和演示站无关部署页面只认build:demo。本地先验证一遍产物用仓库自带的静态服务pnpm serve:e2e它等价于serve ./examples/local默认端口 3000。浏览器打开后页面正常加载、且明显比开发版清爽没有 watch 提示说明这个包可以直接上服务器。 Nginx 最小配置上传、重载、自检产物是纯静态文件任何 Web 服务器都能托管。以 Nginx 为例只需要 SPA 回退 gzip 这两件事server { listen 80; server_name your-domain.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; }把产物传上服务器再校验并重载 Nginxreload 不断开已有连接比 restart 温和scp -r examples/local/* useryour-server:/var/www/univer/ ssh useryour-server nginx -t systemctl reload nginx第一条把静态文件复制到服务器目录第二条测试配置无误后热加载。跑完做三项自检浏览器打开根域名表格演示页完整渲染工具栏、sheet 页签、数据都在在任意子路由上按刷新键不出现 404——证明try_files回退生效打开浏览器网络面板静态资源体积明显变小——证明 gzip 生效➕ 可选增强多实例Univer 支持同一页面挂多个互不干扰的实例适合多工作簿分屏这类产品形态示例在 examples/src/sheets-multi/。国内 CDN 加速目标用户在国内时把examples/local/产物传到国内 CDN再把 HTML 里的资源地址换成 CDN 域名即可想以单个 JS/CSS 引入的场景可以看 examples/umd/ 里的 umd 产物。发版前跑单测执行pnpm testvitest turbo按包并行各包的测试入口在自己的vitest.config.ts。 排障速查现象可能原因处理办法pnpm dev端口不是 30023002 被占用detect-port 自动顺延了以终端打印的地址为准要固定端口就释放 3002pnpm install报 Node/engine 相关错误Node 或 pnpm 版本低于要求升级 Node 到 22.18、pnpm 到 11 后重跑部署后根路径正常刷新子路由 404Nginx 缺 SPA 回退location里补try_files $uri $uri/ /index.html;再 reload页面能打开但样式、脚本 404root 路径配错或产物没传全核对 root 指向index.html所在目录重新 scpexamples/local/内容长时间使用页面内存持续增长已知泄漏场景按 docs/FIX_MEMORY_LEAK.md 的步骤排查到这里一个能用的 Univer 站点已经在跑了剩下就是把演示数据换成你自己的业务数据。环境与贡献说明CONTRIBUTING.md核心库源码packages/演示站入口examples/src/main.tsx【免费下载链接】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),仅供参考
上一篇/下一篇内容由系统自动关联
返回资讯列表 →