解决Vue项目刷新404

问题场景

将打包好的Vue项目部署到Nginx或Apache服务器上，刷新页面报404错误。

问题描述

在Vue（或React）单页应用（SPA）中，经过打包后生成的”dist”文件夹内，通常只包含一个”index.html”文件以及一系列静态资源。这设计背后的原因在于SPA的架构特点：只有一个”index.html”作为应用的唯一入口，而其他页面的路由跳转则通过JavaScript来实现。

在浏览器上访问这些页面时，URL虽然会发生变化，但实际上服务器上的静态资源路径保持不变。这是因为服务器始终只有一个”index.html”作为入口文件，其他页面内容是通过JavaScript进行动态加载和渲染的。然而，当用户刷新页面时，浏览器会尝试根据URL请求对应的资源。由于服务器上的资源路径没有变化，刷新操作会导致URL上的路径与实际资源不匹配，从而触发404错误。

与此不同，多页应用具有多个入口文件，每个页面都对应一个独立的HTML文件。这种结构使得每个页面的URL与服务器上的资源路径一一对应，因此刷新操作不会导致404错误。

综上所述，SPA的单一入口和动态路由机制导致了刷新时URL与服务器资源路径不匹配的问题，而多页应用由于多个独立的入口文件，避免了这一问题。

解决方法

方法一：修改路由模式为hash模式

在Vue的路由文件中将mode: 'history'改为mode: 'hash'。

实际上Vue的路由默认使用的就是哈希模式（hash mode），这意味着路由信息会以hash（#）的形式添加到URL中，例如：https://域名/#/about。哈希模式下，当在单页应用中切换路由时，实际上页面不会刷新，只是hash部分的变化，浏览器会在同一个页面上重新加载JavaScript，然后根据hash变化来渲染不同的内容。

然而，为了更符合传统的URL形式，Vue还提供了历史模式（history mode）。在历史模式下，Vue会使用HTML5的History API来管理路由，路由信息以正常的URL形式呈现，例如：https://域名/about。这让单页应用的URL看起来更像传统的多页应用URL，更加友好。

但是，历史模式在某些情况下可能会导致404错误。这是因为历史模式依赖于服务器配置来确保在浏览器请求的URL没有对应的物理文件时，仍然返回应用的入口文件（通常是”index.html”）。这样，单页应用可以根据路由信息动态加载适当的内容。

如果服务器没有正确配置，当用户直接在浏览器地址栏中输入一个历史模式的URL或者刷新当前页面时，服务器可能会尝试查找与该URL对应的物理文件，而实际上这样的文件不存在。这就会导致服务器返回404错误，因为服务器无法找到对应的文件。这并不是Vue本身的问题，而是在使用历史模式时需要服务器正确配置来解决的问题。

方法二：配置服务器

要在使用Vue的历史模式时正确配置服务器，以确保在浏览器请求的URL没有对应的物理文件时仍然返回应用的入口文件（通常是”index.html”），需要根据你所使用的服务器类型进行相应的配置。以下是两种常见的服务器配置示例：

1. Apache

如果你在使用Apache服务器，可以通过修改.htaccess文件来实现正确的配置。在项目的根目录下创建一个.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>

这会告诉Apache在找不到对应文件时始终返回”index.html”。

1. Nginx

如果你在使用Nginx服务器，可以在你的服务器配置文件（通常是/etc/nginx/nginx.conf或者/etc/nginx/sites-available/default）中添加类似以下的配置：

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

这会在找不到对应文件时将请求重定向到”index.html”。

无论你使用哪种服务器，配置后一定要进行测试，确保在直接输入历史模式的URL或刷新页面时，服务器能够正确地返回”index.html”并由Vue应用来处理路由。这样就可以避免历史模式下的404错误。

---

挨踢星球-一个属于互联网的圈子