Vue带参数路由部署Github Pages出现404问题求助

核心原因 #

Github Pages是静态文件托管服务，当你使用Vue Router的createWebHistory（history模式）时，直接访问像Forza3API1/Abarth%20/cars这类带参数的路由，服务器会尝试在文件系统中寻找对应路径的物理文件，但实际上这个路径并不存在，所以返回404。本地开发时，Vue的开发服务器会把所有路由请求都转发到index.html，所以能正常解析路由。

另外，路由参数里的空格被编码成%20，部分静态服务器对这类特殊字符的路径解析可能存在兼容性问题，也会加重404的概率。

解决办法 #

• 改用Hash模式：把路由模式换成createWebHashHistory，这样路由会带上#，比如Forza3API1/#/Abarth%20/cars，Github Pages能正确识别这类路由，不会去请求物理文件，而是交给Vue Router处理。修改代码如下：

const router = createRouter({
  history: createWebHashHistory(BASE_URL), 
  routes
});

• 添加404重定向文件：在项目根目录创建404.html，内容完全复制index.html的内容。同时在package.json里添加homepage字段，值为你的Github Pages访问地址（比如https://你的用户名.github.io/Forza3API1/）。这样当Github Pages返回404时，会加载404.html，Vue Router就能接管路由解析了。

• 规范路由参数格式：跳转路由时，把参数里的空格替换成连字符（-）或者下划线（_），比如把Abarth 改成Abarth或者Abarth-，避免路径中出现%20这类特殊编码，减少服务器解析异常的可能。

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