如何解决单页应用部署后浏览器刷新出现 404 的问题？
单页应用（Single-Page Application，SPA）是一种流行的 Web 应用程序设计模式。SPA 具有如下特征：只有一个 HTML 页面；页面的所有资源都是通过 AJAX 加载的；用户与应用程序交互时不会刷新整个页面，只会局部刷新。
但是，当我们使用单页应用部署在服务器上后，刷新网页时却发现浏览器出现了 404 错误。这是因为单页应用只有一个主页，其他所有页面都是通过 JavaScript 动态获取的，而这些动态生成的页面对应的 URL 地址在服务器端并不存在，导致了浏览器无法找到对应的资源而出现 404 错误。
那么，如何解决这个问题呢？以下是两种方法：
1. 使用后端路由
可以在后端使用路由来处理前端的所有请求，这样刷新页面时就可以匹配到真实的路由，从而解决 404 错误。
以 Node.js 为例，使用 Express 框架实现后端路由：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- -------- ------------------------------------------- ------------ -- ------- ---------- ------------ ----- ---- -- - --------------------------------- --------- --------------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
上述代码中，express.static 中间件定义了静态文件目录，将静态文件暴露给公共目录。而 app.get 定义了前端路由的所有请求都返回 index.html 页面。
2. 使用 Hash 路由
可以使用 Hash 路由实现刷新页面不出现 404 错误。Hash 路由是将路由映射到 URL 的 Hash 中（即 URL 中的 # 号后的部分），这样即使刷新页面，浏览器也只是重新加载 index.html 页面，而不会向服务器发送请求，因此不会出现 404 错误。
以 Vue.js 为例，使用 Hash 路由：
------ --- ---- ------ ------ --------- ---- ------------- ------ ---- ---- ------------------------ ------ ----- ---- ------------------------- ------------------- ----- ------ - - - ----- ---- ---------- ---- -- - ----- --------- ---------- ----- - -- ----- ------ - --- ----------- ----- ------- ------ --- --- ----- ------ ------------------
上述代码中，VueRouter 路由对象定义了两个路由：/ 和 /about。而 mode 属性设置为 Hash 模式，这样所有路由都将映射到 URL 的 Hash 中。
结论
以上就是解决单页应用部署后浏览器刷新出现 404 的两种方法：使用后端路由或使用 Hash 路由。使用后端路由需要在服务器端配置路由，比较麻烦。而使用 Hash 路由相对简单，需要注意的是路由模式需要设置成 Hash。在实际开发中，可以根据项目需求选择最适合的方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673408740bc820c58245fc21