Vercel部署静态网站时目录结构识别异常及资源加载问题咨询

问题1：子目录页面返回404的原因 #

• Vercel静态部署默认以目录下的index.html作为入口，但出现以下情况会触发404：
  1. 访问路径未带尾部斜杠（如/sms-solutions/bulk-and-premium），Vercel未自动重定向到带斜杠的路径，浏览器将该路径识别为文件而非目录，无法匹配到子目录下的index.html。
  2. 部署时子目录的index.html未被正确上传（比如被.gitignore规则排除，或部署同步过程中文件丢失）。
  3. index.html文件名大小写不匹配（比如写成Index.html），Vercel服务器区分大小写，导致无法识别文件。

问题2：CSS文件找不到的原因 #

核心是相对路径解析逻辑错误：当访问sms-solutions页面时，如果URL未带尾部斜杠（/sms-solutions），浏览器会将该路径判定为文件而非目录，此时页面中引用的css/style.css会被解析为根目录下的/css/style.css，而非实际存在的sms-solutions/css/style.css。此外，如果部署时CSS文件的实际存放路径与代码中的引用路径不一致，也会导致查找失败。

问题3：解决方法 #

修复子目录404问题 #

1. 规范访问路径：页面跳转时使用带尾部斜杠的路径（如<a href="/sms-solutions/bulk-and-premium/">），避免不带斜杠的路径。
2. 配置Vercel自动重定向：在项目根目录创建vercel.json文件，添加规则确保不带斜杠的路径自动跳转：

   {
     "trailingSlash": true,
     "rewrites": [
       { "source": "/sms-solutions/bulk-and-premium", "destination": "/sms-solutions/bulk-and-premium/" }
     ]
   }
   

3. 检查文件上传状态：确认子目录的index.html未被.gitignore排除，部署时查看Vercel控制台的文件列表，确保该文件已同步到服务器。
4. 统一文件名格式：确保index.html为全小写，避免服务器大小写识别问题。

修复CSS路径问题 #

1. 使用绝对路径引用：直接指定CSS文件的绝对路径，无论页面URL格式如何都能正确定位：

   <link rel="stylesheet" href="/sms-solutions/css/style.css" />
   

2. 设置路径基准：在HTML头部添加<base href="/">，明确页面相对路径的基准为项目根目录，此时相对路径会基于根目录解析：

   <head>
     <base href="/">
     <link rel="stylesheet" href="sms-solutions/css/style.css" />
   </head>
   

3. 配合路径规范：结合404问题的修复，确保访问sms-solutions页面时URL带尾部斜杠，此时相对路径css/style.css会被正确解析为sms-solutions/css/style.css。

内容的提问来源于stack exchange，提问作者Newton Karanu