2024-07-19 • 环境安装

Vue使用Nginx发布后刷新页面报404错误

Vue项目使用Nginx发布后刷新页面报404错误的解决方案

在使用Vue.js开发单页面应用（SPA）时，经常会遇到部署到Nginx服务器上后，直接访问非根路径页面或刷新页面时出现404错误的问题。这是因为Vue.js的SPA依赖于前端路由，而在服务器上没有相应的页面配置时，就会返回404错误。下面将详细介绍如何配置Nginx来解决这个问题。

1. 理解问题原因

Vue.js的SPA使用Vue Router来管理前端路由。当用户直接访问非根URL或刷新页面时，浏览器会向服务器发送请求该URL对应的资源。由于服务器上实际上并没有这个路径对应的页面，因此会返回404错误。

2. Nginx配置

为了解决这个问题，需要在Nginx配置文件中添加一些配置，使得所有前端路由的请求都重定向到index.html页面，由Vue Router来处理路由。

2.1 修改Nginx配置文件

找到你的Nginx配置文件，通常是在/etc/nginx/nginx.conf，或者在/etc/nginx/sites-available/目录下的某个文件。

2.2 添加try_files指令

在Nginx的配置文件中，针对Vue项目的server块，添加try_files指令。try_files指令会按顺序检查文件是否存在，并使用第一个找到的文件进行响应，如果所有文件都找不到，它会返回最后一个参数指定的响应。

server {
      listen 80;
      server_name example.com;
      root /path/to/your/vue/dist;
      index index.html;
      location / {
          try_files $uri $uri/ /index.html;
      }
  }

这段配置的意思是：当访问任何路径时，Nginx会首先检查该路径下的文件或目录是否存在，如果不存在，则重定向到/index.html，由Vue Router处理路由。

2.3 重启Nginx

修改完配置文件后，需要重启Nginx以使配置生效。

sudo systemctl restart nginx

或者

sudo service nginx restart

3. 测试

配置完成后，访问你的Vue应用，尝试直接访问非根路径的页面或刷新页面，看看是否能够正常加载，不再报404错误。

结论

通过以上步骤，你应该能够解决Vue项目使用Nginx发布后刷新页面报404错误的问题。核心在于正确配置Nginx，使得所有前端路由的请求都能够重定向到index.html页面，由Vue Router来处理。