Vue.js 3部署Nginx后带参数特定URL直接访问返回404问题

你的问题出在Vue单页应用的前端路由特性和Nginx的静态文件处理逻辑不匹配上：

当你直接访问http://www.example.com/edit_form/sdnsaiodaiondiondq这类带参数的URL时，Nginx会默认去服务器文件系统中寻找对应路径的物理文件（比如/edit_form/sdnsaiodaiondiondq这个文件或目录），但这类路径其实是Vue前端路由定义的虚拟路径，不存在对应的物理文件，所以Nginx返回404。而从首页进入后通过前端操作跳转，是Vue的路由系统在浏览器端处理URL，不会触发Nginx的文件查找，因此能正常访问。

修复步骤： #

1. 确认Vue路由使用History模式

确保你的vue-router配置开启了History模式（你的URL结构显然是History模式而非Hash模式）：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(), // 关键：启用History模式
  routes: [
    // 匹配UUID参数的编辑页路由示例
    { path: '/edit_form/:uuid', component: () => import('../views/EditForm.vue') }
  ]
})

2. 修改Nginx配置

你的原配置缺少root（指定静态文件目录）和server_name（绑定域名），导致Nginx无法正确定位Vue打包后的静态资源。修改后的完整配置如下：

server {
    listen 80;
    server_name www.example.com; # 替换为你的实际域名
    root /usr/share/nginx/html/vue-app/dist; # 替换为Vue项目打包后dist目录的绝对路径

    location / {
        try_files $uri $uri/ /index.html; # 核心规则：找不到文件就返回index.html，交给Vue路由处理
    }
}

3. 重启Nginx使配置生效

执行命令重启Nginx：

sudo systemctl restart nginx

这样修改后，任何直接访问的前端路由URL都会被Nginx转发到index.html，由Vue的路由系统解析并渲染对应的页面，包括带UUID参数的编辑页链接。

内容的提问来源于stack exchange，提问作者Michael Jonathan