Vue CLI 3 创建的单页应用 SPA 部署到服务器后刷新页面 404 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 Vue CLI 3 创建单页应用（SPA）是一个非常流行的选择。然而，当我们将这个应用部署到服务器上并刷新页面时，很可能会遇到 404 错误的问题。这是因为在 SPA 中，所有的路由都是前端路由，而服务器只能识别静态资源文件，无法处理前端路由。本文将介绍如何解决这个问题。

解决方法

解决这个问题的方法有很多，但是本文将介绍两种最常见的方法。

方法一：使用 history 模式

Vue CLI 3 默认使用的是 hash 模式，即路由路径前面会有一个 # 符号。这种模式下，服务器只需要识别静态资源文件即可，不需要处理前端路由。但是，这种模式下的 URL 不太美观，而且在 SEO 上也有一定的影响。

因此，我们可以使用 history 模式来解决这个问题。在 history 模式下，路由路径中不会有 # 符号，而是直接使用正常的 URL。这种模式下，服务器需要配置一个 fallback URL，即当找不到对应的静态资源文件时，返回给前端一个 HTML 文件，由前端处理路由跳转。

具体的配置方法如下：

在 vue.config.js 文件中添加以下代码：

module.exports = {
  publicPath: '/',
  devServer: {
    historyApiFallback: true,
  },
};

在服务器上配置 fallback URL：

如果你使用的是 Nginx，可以在配置文件中添加以下代码：

location / {
  try_files $uri $uri/ /index.html;
}

如果你使用的是 Apache，可以在 .htaccess 文件中添加以下代码：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

方法二：使用 HashRouter 组件

如果你不想使用 history 模式，也可以使用 HashRouter 组件来解决这个问题。HashRouter 组件会自动在 URL 中添加 # 符号，这样服务器就不需要处理前端路由了。

具体的使用方法如下：

安装 react-router-dom：

npm install react-router-dom --save

在 App.js 文件中使用 HashRouter 组件：

-- -------------------- ---- -------
------ - ---------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------

-------- ----- -
  ------ -
    --------
      --------
        ------ ----- -------- ---------------- --
        ------ ------------- ----------------- --
      ---------
    ---------
  --
-

------ ------- ----

总结

在本文中，我们介绍了如何解决将 Vue CLI 3 创建的单页应用部署到服务器后刷新页面 404 的问题。具体的解决方法包括使用 history 模式和使用 HashRouter 组件。无论你选择哪种方法，都需要在服务器上进行相应的配置。希望本文对你有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/662ec726d3423812e4cc27c0