部署流程示例：从代码到路由的完整实践

在搭建一个网站或服务时，很多人卡在了“怎么把写好的程序放到服务器上”这一步。其实整个过程并不复杂，关键是要理清楚每一步的作用，尤其是和路由设置相关的环节。

准备阶段：本地项目结构

假设你正在开发一个简单的博客系统，项目目录长这样：

blog-project/
│
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── api/
    └── posts.json

其中 index.html 是入口文件，访问根路径时应该返回它。而 /api/posts.json 是接口路径，用于前端获取文章列表。

选择部署平台

现在有很多平台支持一键部署，比如 Vercel、Netlify 或者国内的 Coding Pages。以 Vercel 为例，你只需要把代码推送到 GitHub 仓库，再关联账号就能自动构建。

不过重点来了：默认情况下，这些平台会把 index.html 当作首页，但如果你有多个页面或者子路径，就得手动配置路由规则。

配置路由规则

在项目根目录添加一个 vercel.json 文件，用来定义路由行为：

{
  "routes": [
    { "src": "/api/posts", "dest": "/api/posts.json" },
    { "src": "/about", "dest": "/pages/about.html" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

这个配置的意思是：

• 当用户访问 /api/posts，实际返回 posts.json 文件；
• 访问 /about 时指向另一个 HTML 页面；
• 其他所有路径都回退到 index.html，适合单页应用。

部署执行步骤

接下来的操作就很顺了：

1. 将代码提交到 GitHub 仓库；
2. 登录 Vercel，创建新项目并导入该仓库；
3. 平台检测到 vercel.json 后会自动读取路由配置；
4. 几分钟后生成一个类似 blog-project.vercel.app 的地址。

打开浏览器访问你的域名，点击“关于我们”跳转到 /about，网络请求能正确加载对应资源，说明路由生效了。

常见问题处理

有时候你会发现页面能打开，但刷新一下就 404。这是因为服务器没配置好通配符路由。解决办法就是在路由规则里确保最后一条是兜底规则，也就是上面那个 /(.*) 指向首页的配置。

还有一种情况是静态资源路径错误。比如你在 CSS 文件里写了相对路径 ../images/logo.png，但部署后结构变了。建议统一使用根路径引用，例如 /css/style.css，避免层级混乱。

整个部署流程跑通一次之后，下次换平台也能快速上手。不同的服务商配置方式略有差异，但核心思路是一样的：明确资源位置，设置正确的路由映射，让每个 URL 都能找到它的“归宿”。