Vercel单页路由与资源加载问题详解

有志者，事竟成！如果你在学习文章，那么本文《Vercel单页路由与资源加载问题解析》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文深入探讨了在Vercel上部署单页应用（SPA）时，深层URL（如/projects/home）可能遇到的路由和资源加载问题。尽管Vercel的vercel.json配置看似正确，但问题的根源往往在于HTML文件中引用的相对资源路径。文章详细解释了如何通过将相对路径修改为绝对路径来解决此类问题，确保CSS、JavaScript和图片等静态资源在任何URL下都能正确加载，并提供了实用的配置示例与最佳实践。

Vercel单页应用路由与资源加载原理

在Vercel上部署单页应用（SPA）时，一个常见的挑战是确保所有非根路径的URL（例如 /projects 或 /projects/home）都能正确加载应用，并且应用所需的静态资源（CSS、JS、图片等）也能正常访问。这通常涉及到Vercel的vercel.json配置文件中的rewrites规则。

SPA的Vercel配置核心

对于大多数SPA，其核心思想是无论用户访问哪个路径，都由服务器返回同一个index.html文件，然后由前端路由（如React Router, Vue Router等）根据URL路径在客户端进行页面渲染。为了实现这一点，vercel.json通常会配置一个通用的rewrite规则，将所有未匹配到实际文件的请求重写到index.html。

一个典型的Vercel配置如下所示：

{
  "rewrites": [
    { "source": "/:path*", "destination": "/index.html" }
  ]
}

这条规则的含义是：任何传入的请求路径（:path*代表任意路径，包括多层目录）都将被重写到/index.html。这意味着，当用户访问 /projects/home 时，Vercel会返回 index.html 的内容，从而允许SPA的客户端路由接管。

为什么看似正确的配置仍有问题？

在上述vercel.json配置下，用户可以成功访问 /projects 和 /projects/home，但可能会遇到一个棘手的问题：当直接访问深层URL（如 /projects/home）或刷新页面时，页面样式丢失、脚本不执行，甚至图片无法加载。然而，如果从根路径（/）导航到这些深层URL，则一切正常。

问题并非出在vercel.json的重写规则上。实际上，上述重写规则对于SPA来说是完全正确的。真正的问题在于index.html文件中引用的静态资源路径。

考虑以下HTML中的资源引用方式：

错误的资源引用方式（相对路径）：

<link rel="stylesheet" href="asset/style.css" />
<script src="js/main.js"></script>
<img src="images/logo.png" alt="Logo" />

当浏览器加载index.html时，它会根据当前URL来解析这些相对路径。

• 如果当前URL是 https://yourdomain.com/，那么 asset/style.css 会被解析为 https://yourdomain.com/asset/style.css。
• 如果当前URL是 https://yourdomain.com/projects/，那么 asset/style.css 会被解析为 https://yourdomain.com/projects/asset/style.css。
• 如果当前URL是 https://yourdomain.com/projects/home，那么 asset/style.css 会被解析为 https://yourdomain.com/projects/home/asset/style.css。

显然，如果你的静态资源（asset、js、images等文件夹）都位于项目的根目录下，那么当URL是 /projects/home 时，浏览器会尝试从 /projects/home/asset/style.css 加载样式文件，而这个路径在服务器上是不存在的，从而导致404错误，页面样式丢失。

解决方案：使用绝对路径引用资源

解决这个问题的关键是将HTML中所有静态资源的相对路径修改为绝对路径。绝对路径总是从网站的根目录开始解析，无论当前的URL是什么。

正确的资源引用方式（绝对路径）：

<link rel="stylesheet" href="/asset/style.css" />
<script src="/js/main.js"></script>
<img src="/images/logo.png" alt="Logo" />

注意路径前面多了一个 /。这个斜杠表示资源路径是相对于域名根目录的。

例如：

• 无论当前URL是 https://yourdomain.com/、https://yourdomain.com/projects/ 还是 https://yourdomain.com/projects/home，/asset/style.css 都会被解析为 https://yourdomain.com/asset/style.css。

这样，Vercel的rewrites规则确保了任何URL都返回index.html，而index.html中的绝对路径则确保了所有静态资源都能从正确的根目录位置被加载，从而解决了深层URL下的资源加载问题。

示例与注意事项

以下是一个完整的vercel.json配置示例，它包含了SPA所需的重写规则，并且可以与使用绝对路径引用的HTML文件协同工作：

{
  "trailingSlash": false, // 可选：控制URL末尾斜杠的行为
  "rewrites": [
    { "source": "/:path*", "destination": "/index.html" }
  ]
}

注意事项：

1. 构建工具的配置： 如果你使用Webpack、Rollup、Vite等前端构建工具，通常它们会提供配置选项来处理静态资源的公共路径（public path）。确保你的构建工具配置为生成以/开头的绝对路径。例如，在Webpack中，你可以设置output.publicPath: '/'。
2. base 标签的使用： 对于更复杂的SPA或需要部署在子路径（例如 https://yourdomain.com/my-app/）下的情况，你可以在HTML的标签中使用来统一指定所有相对路径的基准URL。但这通常是可选的，并且在大多数Vercel部署到根域名或子域名的情况下，直接使用绝对路径更简单有效。
3. 开发环境与生产环境： 在开发环境中，你可能使用开发服务器，它通常能很好地处理路由和资源加载。但在部署到Vercel等生产环境时，务必验证上述配置和资源路径的正确性。

总结

在Vercel上部署单页应用时，解决深层URL下资源加载问题的关键在于理解服务器重写规则与客户端资源路径解析之间的关系。Vercel的vercel.json中的rewrites规则负责将所有请求引导至index.html，而index.html中引用的静态资源路径则必须使用绝对路径（以/开头），以确保无论当前URL是何种深度，资源都能从网站的根目录正确加载。通过简单的路径修改，即可确保你的SPA在Vercel上拥有完美的路由和资源加载体验。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。