vue 路由刷新后报 404 nginx 错误

单页面应用需要配置 Nginx, 将所有请求重定向到 index.html

说明

以下内容由AI产生并经过本人验证

当你在使用Vue.js配合Vue Router的History模式部署到Nginx服务器上时，刷新页面或直接访问非根路径URL时遇到404错误是很常见的问题。这是因为Vue Router的History模式利用HTML5的History API来改变浏览器的URL，而不需要重新加载页面，但这样做会导致直接访问这些URL时，如果服务器没有相应的静态文件，就会返回404错误。

要解决这个问题，你需要对Nginx配置进行调整，确保所有未找到的请求都重定向到index.html，让Vue Router来处理这些路由。以下是一个基本的Nginx配置示例，展示了如何解决这个问题：

server {
    listen 80;
    server_name your.domain.com; # 替换为你的域名

    root /path/to/your/vue-app/dist; # 替换为Vue应用的dist目录实际路径

    location / {
        try_files $uri $uri/ /index.html; # 关键配置，尝试访问文件，如果不存在则返回index.html
    }

    # 如果有其他静态资源的配置，可以在这里添加
}

在这个配置中，try_files 指令是关键。它告诉Nginx首先尝试访问请求的URI所对应的文件或目录，如果找不到，则尝试访问URI后面加斜杠的目录 ($uri/)，最后如果上述两者都失败，则返回 index.html。这样，无论用户请求哪个路由，Nginx都会确保Vue Router有机会处理这个路由，而不是直接返回404错误。

记得调整完配置后，重启Nginx服务以使改动生效：

sudo service nginx restart

这样配置后，刷新页面或直接访问非根路径应该就不会再遇到404错误了。