Vue.js项目部署到Cpanel后直接访问路由返回404错误如何解决？

该问题是Vue路由配置与Cpanel默认的Apache服务规则不匹配共同导致的，属于SPA（单页应用）部署的常见共性问题：

• 若你的Vue项目使用了history模式的前端路由，所有路由路径都是前端虚拟生成的，服务器上不存在/posts这类真实的目录/文件资源
• 直接访问嵌套路由时，Apache会优先查找对应路径的实体资源，找不到就会返回404错误，只有从首页跳转进入的路由才能正常被前端js接管

第一步：确认Vue项目配置 #

先检查项目内路由和打包配置无误：

• 路由配置需正确设置基础路径，若你部署在子域名根目录，示例配置如下：

  // Vue3 + Vue Router4 示例
  import { createRouter, createWebHistory } from 'vue-router'
  const router = createRouter({
    history: createWebHistory('/'), // 子目录部署的话替换为对应目录路径
    routes: [...]
  })
  

• 打包配置中publicPath设为'/'（根目录部署场景），对应vue.config.js（Vue Cli）或vite.config.js（Vite）中的配置项。
• 配置完成后重新打包，把产物上传到Cpanel对应站点目录。

第二步：配置Cpanel站点重定向规则 #

这是解决问题的核心步骤，需要让所有站点请求都回退到index.html，交给前端路由处理：

1. 登录Cpanel面板，进入该子域名绑定的站点根目录（默认一般为public_html/web-dev，可在子域名管理页查询对应路径）
2. 新建/编辑目录下的.htaccess文件，写入以下规则：

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

3. 保存文件后清理浏览器缓存，重新测试直接访问嵌套路由即可正常加载。

如果不想修改服务器配置，可把Vue路由改为hash模式，路径会自动携带#前缀，不会触发服务器的路径资源查找，无需额外配置即可直接访问嵌套路由，但URL美观度会受影响。

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