在使用 Vue.js 构建单页面应用（SPA）时，需要正确配置 Nginx，以确保用户访问不同路由时不会遇到 404 错误。

Nginx 配置解析

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

• $uri: 尝试请求 URL 对应的文件。如果文件存在，返回该文件。
• $uri/: 如果是目录，尝试访问目录下的文件。
• /index.html: 如果找不到对应的文件或目录，将所有请求重定向到 index.html。

为什么需要这个配置？

Vue.js 使用前端路由（如 Vue Router）处理页面跳转。单页面应用（SPA）加载时，所有的路由请求都应指向 index.html，然后由 Vue Router 动态渲染页面内容。

配置示例

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/vue/dist;
    index index.html;

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

• root 指定构建后的 Vue 应用文件目录。
• 配置了 try_files 后，用户访问 /about 或其他路径时，都会返回 index.html，由 Vue Router 处理具体的页面渲染。

总结

通过 Nginx 配置 try_files，可以确保 Vue.js 应用在用户刷新页面或直接访问 URL 时，始终正确加载 index.html，避免出现 404 错误。