部署到Vercel后页面导航异常（本地正常）的配置咨询

核心问题排查 #

1. 文件夹空格引发路径解析异常：contact us文件夹包含空格，Vercel路径解析中对空格的处理需特殊转义，容易导致路由匹配失败。
2. 首页重写路径错误：当前配置最后一条重写指向/html/digitalize/index.html，但根据提供的项目结构，根目录不存在该路径，会导致首页或未匹配路由返回404。
3. 大小写匹配问题：Vercel文件系统区分大小写，需确保vercel.json中的路径与实际文件夹/文件名大小写完全一致（比如AboutUs不能写成aboutus）。

修正后的vercel.json配置 #

方案1：重命名含空格的文件夹（推荐） #

将contact us文件夹重命名为contact-us或contactUs，使用以下配置：

{
  "version": 2,
  "rewrites": [
    {
      "source": "/about",
      "destination": "/AboutUs/html/digitalize/about.html"
    },
    {
      "source": "/contact",
      "destination": "/contact-us/html/digitalize/contact.html"
    },
    {
      "source": "/ourServices",
      "destination": "/ourServices/html/digitalize/service.html"
    },
    {
      "source": "/blogs",
      "destination": "/blogs/html/digitalize/blogs.html"
    },
    {
      "source": "/blog-details",
      "destination": "/blogs-details/html/digitalize/blog-details.html"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "cleanUrls": true,
  "trailingSlash": false
}

方案2：保留原文件夹名（转义空格） #

如果不想修改文件夹名，将contact路由的destination中的空格转义为%20：

{
  "version": 2,
  "rewrites": [
    {
      "source": "/about",
      "destination": "/AboutUs/html/digitalize/about.html"
    },
    {
      "source": "/contact",
      "destination": "/contact%20us/html/digitalize/contact.html"
    },
    {
      "source": "/ourServices",
      "destination": "/ourServices/html/digitalize/service.html"
    },
    {
      "source": "/blogs",
      "destination": "/blogs/html/digitalize/blogs.html"
    },
    {
      "source": "/blog-details",
      "destination": "/blogs-details/html/digitalize/blog-details.html"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "cleanUrls": true,
  "trailingSlash": false
}

额外注意事项 #

• 确认index.html的实际位置：如果首页不在根目录，需对应修改最后一条重写规则的destination路径。
• 部署后查看Vercel控制台的部署日志，排查是否存在文件找不到的具体报错。
• 本地测试时注意大小写：Windows系统不区分文件大小写，但Vercel区分，确保本地路径与部署路径大小写完全一致。

内容的提问来源于stack exchange，提问作者fady fathey