vue项目，页面刷新就404了

在使用 Vue.js 开发单页应用（SPA）时，常会遇到一个问题：当用户在浏览器中直接刷新页面或直接访问某个路由时，服务器返回 404 错误。这是因为 SPA 的路由通常是在客户端处理的，而当直接访问某个路由时，服务器并不知道要返回哪个文件。为了解决这个问题，我们需要对服务器进行一些配置。

问题分析

Vue Router 默认使用 HTML5 History 模式，意味着它会使用浏览器的 History API 进行路由管理。这样可以使得 URL 显得更简洁，不会包含 # 符号。然而，当你刷新页面或直接访问某个 URL 时，服务器会尝试查找对应的文件或者路径。如果该路径在服务器上不存在，就会导致 404 错误。

解决方案

为了解决这个问题，我们需要确保服务器将所有的请求都指向我们的 index.html 文件。这通常涉及到进行一些服务器配置。下面我将提供不同情况下的解决方案。

1. 使用 Nginx 作为服务器

如果你的 Vue 应用是部署在 Nginx 上，你可以通过以下配置解决该问题。在你的 Nginx 配置文件中（通常位于 /etc/nginx/sites-available/default 或者 /etc/nginx/conf.d/default.conf），添加以下代码：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        root /path/to/your/vue/project/dist;  # 指向构建后的文件路径
        try_files $uri $uri/ /index.html;  # 如果找不到文件，转向 index.html
    }

    error_page 404 /404.html;  # 自定义404页面
}

这样，当用户访问任何路由时，Nginx 会首先查找对应的文件，如果没有找到，最终会返回 index.html 文件，这样 Vue 应用可以接管路由。

2. 使用 Apache 作为服务器

如果你的应用是部署在 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>

这个配置告诉 Apache 将所有请求转发到 index.html，除非请求的URI对应的文件或目录存在。

3. 使用 Vue CLI 进行开发

在开发过程中，你可以通过 Vue CLI 提供的服务来避免类似问题。Vue CLI 默认采用了 Hash 模式，刷新时不会出现 404 的情况。如果希望使用 History 模式，可以在项目的 vue.config.js 配置中添加如下代码：

module.exports = {
    devServer: {
        historyApiFallback: true  // 启用此选项后，在开发模式下刷新不会404
    }
};

小结

确保你的 Vue 应用在面临直接路由访问或刷新时能够正常工作是非常重要的。通过正确配置服务器（如 Nginx 或 Apache），你可以避免 404 错误，让用户的体验更加流畅。在日常开发和部署中，针对特定的服务器环境，做好配置能够有效防止这个问题的出现，从而提升用户体验。