在前端开发中，使用 Vue CLI 3 创建单页应用（SPA）是一个非常流行的选择。然而，当我们将这个应用部署到服务器上并刷新页面时，很可能会遇到 404 错误的问题。这是因为在 SPA 中，所有的路由都是前端路由，而服务器只能识别静态资源文件，无法处理前端路由。本文将介绍如何解决这个问题。
解决方法
解决这个问题的方法有很多，但是本文将介绍两种最常见的方法。
方法一：使用 history 模式
Vue CLI 3 默认使用的是 hash 模式，即路由路径前面会有一个 # 符号。这种模式下，服务器只需要识别静态资源文件即可，不需要处理前端路由。但是，这种模式下的 URL 不太美观，而且在 SEO 上也有一定的影响。
因此，我们可以使用 history 模式来解决这个问题。在 history 模式下，路由路径中不会有 # 符号，而是直接使用正常的 URL。这种模式下，服务器需要配置一个 fallback URL，即当找不到对应的静态资源文件时，返回给前端一个 HTML 文件，由前端处理路由跳转。
具体的配置方法如下：
- 在
vue.config.js文件中添加以下代码：
-------------- - -
----------- ----
---------- -
------------------- -----
--
--- 在服务器上配置 fallback URL：
如果你使用的是 Nginx，可以在配置文件中添加以下代码：
-------- - - --------- ---- ----- ------------ -
如果你使用的是 Apache，可以在 .htaccess 文件中添加以下代码：
--------- -------------- ------------- -- ----------- - ----------- ------------- - --- ----------- ------------------- --- ----------- ------------------- --- ----------- - ----------- --- -----------
方法二：使用 HashRouter 组件
如果你不想使用 history 模式，也可以使用 HashRouter 组件来解决这个问题。HashRouter 组件会自动在 URL 中添加 # 符号，这样服务器就不需要处理前端路由了。
具体的使用方法如下：
- 安装 react-router-dom：
--- ------- ---------------- ------
- 在
App.js文件中使用 HashRouter 组件：
------ - ---------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
---------
--
-
------ ------- ----总结
在本文中，我们介绍了如何解决将 Vue CLI 3 创建的单页应用部署到服务器后刷新页面 404 的问题。具体的解决方法包括使用 history 模式和使用 HashRouter 组件。无论你选择哪种方法，都需要在服务器上进行相应的配置。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/662ec726d3423812e4cc27c0