企业官网建设流程全解析

shadcn-dashboard-landing-template 是一个基于 Vite-React 与 Next.js、Tailwind CSS、shadcn/ui 打造的开源管理后台（Dashboard）+ 落地页（Landing Page）模板，完全可定制、可直接投入生产。本文对比Vercel、Netlify 与静态托管三种部署方案，从构建产物到上线步骤逐一拆解，帮你在 10 分钟内把项目部署上线。🚀

一、部署前先看一眼：这个模板包含什么

在动手部署之前，先明确你部署的是什么：

• 两套完整模板：30+ 页面的管理后台（含 Mail、Tasks、Chat、Calendar、Users 应用演示）+ 一个功能齐全的营销落地页
• 两种框架版本，功能 100% 对等，目录独立存放：
  • vite-version/—— Vite + React Router 的单页应用（SPA），适合纯前端、静态托管
  • nextjs-version/—— Next.js 15+ App Router，支持 SSR/SSG，适合 SEO 敏感场景
• 内置实时主题定制器（tweakcn 驱动），可在线改色并导出主题

后台首页一览：指标卡片、面积图、数据表格一应俱全，这正是你要上线的核心内容。

二、一键安装：环境准备与本地验证

环境要求

获取项目并本地跑起来

git clone https://gitcode.com/gh_mirrors/sh/shadcn-dashboard-landing-template cd shadcn-dashboard-landing-template/vite-version # 或 nextjs-version pnpm install pnpm dev

• Vite 版本访问http://localhost:5173
• Next.js 版本访问http://localhost:3000

💡 上线前务必本地验证一次。打开/dashboard看后台、/landing看落地页，确认功能正常再进入部署环节。

三、构建产物：理解它是成功部署的一半

两种版本的构建命令相同，产物不同，这直接决定了你选择哪种托管方式：

pnpm build # 生产构建 pnpm preview # Vite 版本：本地预览构建产物 pnpm start # Next.js 版本：本地启动生产服务器

路由清单可以查看 vite-version/src/config/routes.tsx（Vite 版共 30+ 路由），Next.js 版的页面结构在 nextjs-version/src/app/ 下按 App Router 目录组织。

四、方案一：Vercel 部署（零配置，最适合 Next.js 版本）

Vercel 是 Next.js 的官方宿主，对nextjs-version/可以做到几乎零配置。

步骤：

1. 将项目代码推送到你的代码仓库（Git 平台）
2. 在 Vercel 控制台点击Add New → Project，导入仓库
3. 设置Root Directory为nextjs-version（若部署 Vite 版则填vite-version）——这是关键，仓库根目录同时包含两套版本
4. Vercel 会自动识别框架并填充构建命令pnpm build，直接确认部署
5. 部署完成后绑定自定义域名即可

优势：推送代码自动触发部署、全球边缘网络、内置图片优化。Next.js 版本中 nextjs-version/next.config.ts 已预配置了images优化与安全响应头，在 Vercel 上可直接生效。

五、方案二：Netlify 部署（两个版本都友好）

Netlify 对静态产物格外友好，Vite 版和 Next.js 版都能顺利部署。

步骤：

1. 在 Netlify 控制台点击Add new site → Import an existing project，导入仓库
2. Build command填pnpm build
3. Publish directory按版本填写：
   • Vite 版本 →vite-version/dist
   • Next.js 版本（静态导出）→nextjs-version/.next
4. 为 Vite 版添加一条 SPA 重定向规则（见下方配置），否则刷新/dashboard等深层链接会 404
5. 点击 Deploy

推荐在仓库中放一个netlify.toml，一劳永逸：

[build] command = "pnpm build" publish = "dist" [[redirects]] from = "/*" to = "/index.html" status = 200

优势：配置项直观、内置表单/函数能力、免费额度充足；SPA 兜底规则写进配置文件后，团队协作不会再踩路由坑。

六、方案三：静态托管（Cloudflare Pages、GitHub Pages、Nginx）

如果你的目标是零成本 + 完全自主，纯静态托管是 Vite 版本的最佳归宿。

核心步骤：

1. 本地执行pnpm build，得到vite-version/dist/目录

2. 将dist/上传到目标静态托管（Cloudflare Pages 可直连仓库自动构建；GitHub Pages 推送 dist 即可；自建服务器则丢进 Nginx 站点目录）

3. 务必配置 SPA 兜底：所有未命中的路径都回退到index.html

   location / { try_files $uri $uri/ /index.html; }

4. 子路径部署（如挂在example.com/admin/下）：项目已预留VITE_BASENAME环境变量，在 vite-version/vite.config.ts 中可以看到它被注入到构建配置，构建时传入VITE_BASENAME=/admin即可，无需改代码

优势：免费、无平台锁定、延迟取决于你选的 CDN；劣势：需要自己处理路由兜底与子路径，不适合需要 SSR 的场景。

七、三种部署方案横向对比：选哪个？

一句话选型：

• 追求零配置、SEO 优先 →Vercel + Next.js 版本
• 喜欢 Netlify 生态或想要更多托管能力 →Netlify
• 内部工具、预算为零、想完全自控 →静态托管 + Vite 版本

不确定的话，可先阅读框架选型文档 docs/guide/choosing-framework.md。

八、常见问题排查（部署避坑清单）

更多细节参见 docs/vite/troubleshooting.md 与 docs/nextjs/troubleshooting.md。

九、相关文档与源码路径

官方文档：

• 安装指南：docs/guide/installation.md
• Vite 快速上手：docs/vite/quick-start.md
• Next.js 快速上手：docs/nextjs/quick-start.md
• 框架选型对比：docs/guide/choosing-framework.md
• 主题定制器：docs/theme-customizer/

关键源码：

• Vite 构建配置（含VITE_BASENAME子路径支持）：vite-version/vite.config.ts
• Next.js 配置（图片优化、安全头、重定向）：nextjs-version/next.config.ts
• Next.js 中间件（路由重定向示例）：nextjs-version/src/middleware.ts
• Vite 版全部路由定义：vite-version/src/config/routes.tsx
• 两个版本的构建脚本：vite-version/package.json、nextjs-version/package.json

模板本身 MIT 开源、生产就绪，配合上述任一方案都能快速上线。祝部署顺利！🎉