关于vue3 使用createWebHistory模式 404 在nginx解决方案

转载：https://baijiahao.baidu.com/s?id=1809227988956316454&wfr=spider&for=pc

 

在构建现代 web 应用时，我们总是希望 URL 能够简洁而美观。Vue3 的 HTML5 模式通过 createWebHistory() 可以让我们的 URL 显得更加“自然”，比如 https://example.com/user/id。然而，当用户直接访问这样一个 URL 时，可能会遇到令人尴尬的 404 错误。别着急！今天，我们将手把手教你如何优雅地解决这个问题，确保你的应用在任何情况下都能自信地展现自己！

前言

在现代 web 开发中，单页应用（SPA）已经是大势所趋。Vue3 的 createWebHistory() 让我们可以优雅地运用 HTML5 的历史模式，将传统 hash 模式中的 URL 从 https://example.com/#/user/id 变为更自然的 https://example.com/user/id。这种做法不仅让你的 URL 看起来更像个成年人，也让网站的用户体验更上一个档次。然而，这种优雅的变革也带来了一个小困扰：如果用户直接输入这样的 URL，可能会遭遇一片 404 错误的尴尬海洋。这是因为服务器并不知道如何处理这些看起来如此友好的 URL。不过别急，今天我们将一步步带你解决这个问题，让你的应用在任何情况下都能自信地迎接每一位访客！

简介

Vue Router 是 Vue.js 官方的路由管理工具，简直就是你的应用的导航小能手。它支持多种路由模式，其中 HTML5 模式是当下 web 开发的宠儿。与老旧的 hash 模式相比，HTML5 模式让我们的 URL 看起来更像是写在字典里的规范单词，而不是乱码的神秘符号。然而，这种优雅的 URL 并不是一劳永逸的解决方案。为了确保用户在每次点击时都能顺利到达目的地，我们还需要对服务器进行一些额外的调教。这就像给你的导航系统加个 GPS，让它在任何情况下都能精准定位，无论用户怎么玩，404 错误都不会再次来打扰！

思路流程

1.使用 createWebHistory() 创建 HTML5 模式的路由：首先，我们要用 createWebHistory() 让你的 URL 从“嗨，我是 hash”变成“嗨，我是优雅的 HTML5”。这不仅让你的链接看起来更有范儿，还能让用户在浏览时感受到一种简洁的美感。

2.配置服务器回退路由：接下来，为了确保用户在输入那些看起来像是来自未来的 URL 时，不会被困在 404 错误的迷雾中，我们需要在服务器上配置回退路由。这样，服务器在找不到具体资源时，会慷慨地返回应用的 index.html，就像一个友好的向导，确保用户不管去哪里都能找到家。

3.测试和验证：最后，我们需要进行测试，确保一切设置妥当。当用户直接输入某个 URL 时，我们的应用不会陷入尴尬的 404 错误，而是能优雅地展示目标页面。通过这种方式，我们可以确保即使是最挑剔的用户也不会被错误页面打扰，体验到流畅而自然的浏览感受。

示例代码

1. 配置 Vue Router

首先，我们在 Vue3 中使用 createWebHistory() 来创建优雅的路由：

2. 服务器配置

针对不同的服务器类型，配置方法略有不同。以下是一些常见服务器的配置示例：

Nginx 配置

对于使用 Nginx 服务器的用户，可以在 Nginx 的配置文件中添加如下规则：

详细解析

server { ... }

这是 Nginx 配置文件中的一个 server 块，用来定义一个虚拟主机的设置。就像给不同的活动配置不同的舞台，每个 server 块都为一个特定的域名或 IP 地址提供服务。

listen 80;

这个指令告诉 Nginx，它将守望着端口 80。端口 80 是 HTTP 的默认端口，就像是前门的门铃，敲响它就是在告诉 Nginx “有人来了！”

server_name example.com;

这里的 example.com 是你的网站域名。Nginx 将只处理发往这个域名的请求。换句话说，只有当有人敲响了你家门铃（即访问 example.com）时，Nginx 才会回应。

location / { ... }

这个 location 块用于处理匹配到 / 的请求，简单来说，就是所有进入你家门的客人。这里定义了当用户访问你的网站时，Nginx 应该如何应对。

try_files $uri $uri/ /index.html;

这个指令可以说是 Nginx 的“万事通”，它会按照下面的步骤来找东西：

$uri：首先，它会尝试找出请求的文件。例如，如果用户访问 https://example.com/user/id，Nginx 就会找 /user/id 这个文件。

$uri/：如果找不到那个文件，Nginx 还会尝试找这个路径是否是一个目录。例如，它会检查 /user/id/ 是否存在。

/index.html：如果这两个都找不到，Nginx 就会从“藏宝箱”里拿出 index.html 文件。这个文件通常是单页应用的入口页面，能处理所有那些找不到的路径请求。就像是给客人一份地图，让他们能找到正确的房间。

作用

1.资源直接访问

如果请求的资源（如一个特定的页面）存在，Nginx 会直接把它呈现给用户。就像当你去餐馆点菜，服务员直接端上你点的菜。

2.友好的 404 处理

当请求的资源不存在时，Nginx 会把请求重定向到 index.html。对于单页应用（SPA）来说，这就像是一个万能的入口，让 Vue Router 处理所有的路由。这样，无论用户输入什么 URL，他们总能看到应用的主页面，而不是看到404的尴尬错误页面。

3.完美的用户体验

无论用户输入什么 URL，Nginx 都会返回 index.html，然后由 Vue Router 处理实际的路由逻辑。这样一来，你的单页应用就能完美地呈现，而不必担心因 URL 错误而影响用户体验。

通过这样配置 Nginx，你的 Vue3 应用就能在各种情况下保持优雅，不论用户如何访问你的 URL，都会得到一致的体验。这就是让用户告别 404 错误的秘诀，快去试试吧，让你的应用更加完美！

Apache 配置

对于 Apache 服务器，你可以在 .htaccess 文件中添加以下规则：

详细解析

<IfModule mod_rewrite.c> ... </IfModule>

这行指令就像是在设置一个守护神，它会检查 mod_rewrite 模块是否已经上线。mod_rewrite 是 Apache 的 URL 重写大法师，能巧妙地操控 URL 的命运。通过使用 <IfModule> 块，我们确保这些魔法规则只有在这位大法师在场时才会生效，从而避免在 mod_rewrite 不在线时出现尴尬的错误。就像在开会前确认一下主持人是不是到场一样，保证你的重写规则可以顺利执行！

RewriteEngine On

这个指令就像给 Apache 开了一个神奇的功能开关，一下子解锁了它的 URL 重写超级能力。简单来说，就是让 Apache 准备好，像个技艺高超的魔术师一样，迎接并处理后续的 URL 重写规则。不再只是处理普通的请求，而是变成了可以根据你的设定重新编排 URL 的大咖！

RewriteBase /

这个指令就像是为你的重写规则设定了一个“家”的地址。通过将基础路径设置为 /，你告诉 Apache 所有的重写规则都从网站的根目录开始生效。简单来说，就是给你的 URL 重写规则设定了一个起点，从这里它们将开始发挥魔力，确保每个请求都能按照你的设定顺利处理。就像在地图上标记了起点，让你的规则有了明确的出发位置！

RewriteRule ^index\.html$ - [L]

这个规则就像给 index.html 贴了一个“免疫卡”，让它在重写规则中畅行无阻。^index\.html$ 是个精确的匹配器，专门找 index.html 这个文件。- 表示对它不做任何改动，仿佛给它一个“免检通行证”。而 [L] 则像是在比赛中为 index.html 举起了“终点线”的标志，匹配成功后立即停止处理其他规则，让它安稳地在不受打扰的状态下被访问。总之，这条规则确保 index.html 在规则的世界里能够高枕无忧，尽情展现它的风采！

RewriteCond %{REQUEST_FILENAME} !-f

这个条件就像是个“文件侦探”，负责检查请求的文件是否真的存在。如果 REQUEST_FILENAME（即你请求的文件路径）不是一个实际存在的文件，侦探就会挥动“无文件”的警示牌。!-f 就是它的“不是文件”标志，确保只有在文件不存在的情况下，才会让后续的重写规则接管。换句话说，它是那位认真检查来访者证件的门卫，确保每一个不在文件列表中的请求都能顺利转交给接下来的处理环节。

RewriteCond %{REQUEST_FILENAME} !-d

这个条件像是个“目录侦探”，专门检查请求的路径是否真的指向一个实际存在的目录。如果 REQUEST_FILENAME 不是一个存在的目录，侦探就会举起“无目录”的警示牌。!-d 就是它的“不是目录”标志，只有在路径并不存在时，条件才会成立。这位侦探确保每一个不在目录列表中的请求都能被转交给后续的重写规则，仿佛是在检查文件夹的有效性，确保只有那些“未登记的”路径才会接受进一步处理。

RewriteRule . /index.html [L]

这条规则就像是个无所不包的“万能接待员”，处理所有的来访请求。如果之前的条件都确认请求既不是一个实际存在的文件，也不是一个有效的目录，那么这位接待员就会热情地将所有的请求引导到 index.html 文件。. 是它的“全能通行证”，能匹配任何请求路径；而 /index.html 是它的“目标地”，确保每个请求都能顺利到达。[L] 就是它的“终点线”标志，表明匹配成功后立即停止处理其他规则。这条规则确保所有未被识别的请求都被优雅地引导到你的单页应用的主入口，保持网站的流畅与一致性。

作用

1.直接访问 index.html

确保 index.html 文件不会被重写规则干扰。它允许你直接访问这个文件，确保所有正常的文件请求可以被正确处理。

2.处理 SPA 的路由

当用户请求的文件或目录不存在时，将请求重定向到 index.html。这样，所有未匹配到静态文件的请求都会被送到 index.html，然后由客户端的 JavaScript（如 Vue Router）处理路由。这对于单页应用（SPA）来说非常重要，因为前端路由需要接管所有的 URL。

3.提升用户体验

通过确保所有未知路径都被重定向到 index.html，用户即使直接访问某个 URL，也能看到正确的应用页面，而不是遇到 404 错误页面。

通过这样的配置，Apache 服务器会将所有未知路径重定向到 index.html，然后 Vue Router 会接管并显示正确的视图。这对于使用 HTML5 模式的单页应用（SPA）来说非常重要，确保用户能够顺利访问应用中的任何路由，而不会看到错误页面。

运行结果

配置完成后，无论用户如何访问你的应用，服务器都会将请求重定向到 index.html 页面。Vue Router 将接管路由并渲染相应的页面。这样，你的应用将不会再因为 URL 迷路而返回 404 错误，用户体验得到大大提升！

适用场景

这种配置尤其适用于以下场景：

  • 单页应用（SPA）：对于使用 Vue3、React 等现代前端框架构建的单页应用来说，HTML5 模式能提供更干净的 URL 结构，优化用户体验，减少页面刷新，提高应用的流畅性。

  • 优雅的 URL 结构：适用于那些希望保持 URL 结构简洁且富有可读性的应用，通过避免使用哈希 (#) 符号，提升用户体验和视觉美感。

  • 直接访问特定 URL：当应用需要支持用户直接访问特定的路径或页面时，这种配置能确保所有 URL 请求正确地回退到应用的 index.html 文件，从而避免 404 错误。

  • 搜索引擎优化（SEO）：HTML5 模式提供的干净 URL 对搜索引擎友好，有助于提升网站在搜索结果中的排名，增强网站的可发现性。

  • 静态网站：对于那些需要动态路由支持的静态网站项目，使用这种配置能确保即便是动态生成的内容也能被正确处理，从而提高网站的功能性和用户体验。

注意事项

  • 服务器支持：在应用此配置前，请确认你的服务器支持 URL 重写规则。有些共享主机可能限制自定义配置，因此确保与你的主机提供商确认支持情况。

  • 缓存问题：修改服务器配置后，请务必清理浏览器缓存。这能确保你看到的是最新的效果，避免因缓存问题造成的视觉或功能不一致。

  • 全面测试：在不同的浏览器和设备上进行充分测试，以确保应用在各种环境中都能保持一致的用户体验。这样可以发现并解决潜在的兼容性问题。

  • 服务器配置：确保你的服务器能够处理所有请求，并将其正确地重定向到 index.html。不同的服务器需要不同的配置方法，确保你了解并正确设置。

  • 路径一致性：仔细检查路由设置和服务器路径是否保持一致。不一致的路径可能会导致 404 错误，从而影响用户访问体验。

  • 路径映射：验证路径是否正确映射到应用的入口点。确保路径设置准确无误，以避免因路径错误导致的加载问题。

优点和缺点

优点：

  • 浏览器历史记录和书签支持更佳：HTML5 模式让你的应用在浏览器中表现得像一个正经人，支持历史记录和书签功能，用户可以轻松保存和回溯他们的访问路径。

  • 更符合现代 Web 开发的最佳实践：这种模式如同现代 Web 开发的“潮流前线”，让你的应用看起来更专业，符合当前的开发标准。

  • 优雅的 URL：你的 URL 不再像一串乱码，而是清晰美观，符合 SEO 和用户体验的双重最佳实践。简洁的地址不仅提升用户体验，还让搜索引擎觉得你很专业。

  • 简化路由管理：所有路由请求都被统一处理，减少了配置的复杂性。像把所有麻烦的事情都交给一个人做，这样你就可以轻松享受“轻松开发”的乐趣。

缺点：

  • 需要额外的服务器配置：虽然应用看起来很酷，但服务器配置却可能让你感到“额外的压力”。为了让一切顺畅运行，你可能需要调整服务器的设置。

  • 服务器配置要求较高：不同服务器对配置的要求如同考试题目，各有不同。你可能需要花费时间来搞懂不同的配置方法，避免被配置难题困扰。

  • 在某些旧版浏览器中可能不完全兼容：旧版浏览器可能对 HTML5 模式嗤之以鼻，它们可能会在你的优雅 URL 面前摆出一副不屑的态度。

  • 服务器依赖：你的应用运行得是否顺利，几乎全靠服务器的良好配置。如果服务器配置不当，就像一场没有彩排的演出，可能出现一些小问题。

  • 调试复杂性：当问题出现时，调试过程可能会像玩“找茬”游戏一样，让你在多个配置文件中翻找，费时又费力。

最佳实践

  • 配置回退路由：在使用 Vue3 和 HTML5 模式的应用中，务必配置服务器的回退路由，以确保所有的路径请求都能够正确地重定向到 index.html，从而避免 404 错误。

  • 定期检查和更新：定期检查服务器配置，特别是在进行更新和部署后，确保配置不会引发问题。保持配置的及时更新，以适应应用的变化和新需求。

  • 开发阶段验证：在开发过程中，确保所有路由都能够正常工作。通过全面测试，避免在生产环境中出现意外的路径访问问题，确保发布的应用无缝运行。

  • 文档化配置：记录下你的服务器配置，包括所有的设置细节和变更。这将有助于将来的维护和问题排查，也方便团队成员了解配置情况。

  • 备份配置：在修改服务器配置之前，务必备份现有配置。这能确保在出现问题时能够迅速恢复到之前的稳定状态，减少停机时间和服务中断。

  • 测试不同环境：在不同的服务器环境中进行全面测试，例如 Nginx、Apache 和 Node.js。确保所有深层链接和路径都能正常访问，避免遗漏的配置造成的访问问题。

  • 确保配置完整：确保你的服务器能够处理所有未匹配的请求，并将其重定向到 index.html。这样可以保证用户在访问任意路径时，应用能够正确加载并展示内容。

总结

使用 Vue3 的 HTML5 模式能让你的 URL 看起来像是刚从时尚周走出来的一样优雅。配合服务器的回退路由配置，我们不仅可以优雅地解决 404 错误，还能确保用户体验流畅无阻。这就像给你的应用装上了一双高性能的跑鞋，不管 URL 怎么跑，它都不会迷路！只要配置得当，你的应用将会在现代 web 开发中大放异彩，成为不容错过的明星。记住，无论 URL 多么复杂，良好的配置会让一切变得简单而美好！

posted @ 2025-08-15 11:21  李笑吅  阅读(130)  评论(0)    收藏  举报