Vue-Router本地正常，部署至OVH服务器后路由页面404求助

问题原因 #

你使用的是Vue Router的HTML5 history模式（createWebHistory()），这种模式下前端路由路径会直接显示在URL中。但服务器收到/Tiffauges/edit这类直接访问请求时，会尝试查找对应物理文件或文件夹，而这些路由是前端定义的虚拟路径，不存在实际文件，因此返回404。router-link是前端内部跳转，不会触发服务器请求，所以能正常工作。

解决方案 #

第一步：修正Vue Router配置 #

你的路由路径重复添加了/Tiffauges/前缀，结合publicPath设置会导致路径冗余；同时createWebHistory()需要传入基础路径参数，让路由明确应用的根目录。

修改main.js的路由部分：

// 1. 移除路由path中的/Tiffauges/前缀
const routes = [
  {
    path: '/edit',
    name: 'Edit',
    component: Edit
  },
  {
    path: '/machine/:name',
    name: 'Machine',
    component: Machine
  }, 
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

// 2. 给createWebHistory传入和publicPath一致的基础路径
const router = createRouter({
  history: createWebHistory('/Tiffauges/'),
  routes
});

第二步：配置服务器重定向规则 #

需要让服务器将所有指向该应用的请求，都重定向到index.html，由Vue Router接管路由处理。

Apache服务器（OVH常用环境）

在服务器的Tiffauges文件夹下创建.htaccess文件，写入以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /Tiffauges/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /Tiffauges/index.html [L]
</IfModule>

Nginx服务器

找到站点配置文件，在location /Tiffauges/块中添加规则：

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

第三步：重新打包上传 #

修改完成后执行npm run build，将新生成的dist目录内容重新上传到服务器的Tiffauges文件夹，再测试直接访问路由页面即可。

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