Apache下Vue history模式404需配置重定向至index.html，核心是让Web服务器而非ThinkPHP接管前端路由，规则须置于.htaccess开头且RewriteBase匹配部署路径。
Apache下Vue history模式404重定向到index.html的配置坑
ThinkPHP本身不接管前端路由，Vue的history模式导致刷新页面时，请求直接打到Web服务器（如Apache），而服务器找不到对应路径就返回404。关键不是ThinkPHP改什么，而是让Apache把所有非静态资源、非API请求都fallback到index.html，再由Vue Router接管。
常见错误是只在ThinkPHP的.htaccess里加规则，却没意识到：Vue打包后是纯静态文件，应由Apache优先处理；ThinkPHP的入口index.php根本不会被这次请求触发。
- 确保Vue项目构建输出目录（如
public/或dist/）和ThinkPHP的public/合并部署（即index.html和index.php同级） - 在Apache虚拟主机或
.htaccess中添加以下规则（放在ThinkPHP原有重写规则之前）：
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]注意：RewriteBase /要匹配实际部署路径；如果Vue部署在子目录（如/admin/），需改为RewriteBase /admin/并调整index.html路径。
Nginx中Vue history fallback与ThinkPHP共存的rewrite顺序
Nginx没有.htaccess机制，所有逻辑必须写在server块里。最容易踩的坑是把Vue的fallback规则写在ThinkPHP的try_files之后——那样请求早被index.php捕获，根本轮不到Vue。
立即学习“PHP免费学习笔记（深入）”；
正确做法：先排除静态资源（js/css/img等），再对非文件、非目录的请求，统一fallback到/index.html；仅当请求明确以/api/、/index.php开头，才交由ThinkPHP处理。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- ThinkPHP默认要求
try_files $uri $uri/ /index.php?$query_string;，但这会拦截所有不存在路径，包括Vue路由 - 替换为更精细的判断：先匹配静态文件，再匹配Vue路由兜底，最后才是PHP入口
location / {
try_files $uri $uri/ @vue;
}
location @vue {
rewrite ^(.*)$ /index.html last;
}
location ~ \.php$ {
try_files $uri =404;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_pass php-fpm;
}其中@vue是命名location，确保所有非静态、非PHP请求都落到index.html；而location ~ \.php$仍保障ThinkPHP接口正常响应。
Vue Router的base配置必须和部署路径严格一致
很多人配完服务器重定向，刷新还是白屏或404，问题往往出在Vue Router的base没对齐真实URL路径。它不是“要不要加”，而是“加多少”——必须和你访问Vue应用的实际URL前缀完全一致。
例如：你的域名是https://example.com/，Vue应用部署在根目录，则base: '/'；但如果你把Vue和ThinkPHP一起部署在https://example.com/app/下，那base必须设为'/app/'，否则router.push('/user')生成的地址是/user，而实际需要的是/app/user。
- Vue CLI项目：在
router/index.js中确认createRouter({ history: createWebHistory('<code>base'), ... }) - 检查浏览器地址栏路径，对比
base值是否多了一级或少了一级 - ThinkPHP的
APP_URL或ASSET_URL配置与此无关，别混淆
开发环境 vs 生产环境的重定向逻辑完全不同
Vue CLI的devServer自带historyApiFallback: true，开发时刷新没问题；但一上线就404，说明你误把开发配置当生产方案用了。生产环境没有任何JS服务参与路由劫持，全靠Web服务器配置。
另一个高频误区：用ThinkPHP的Route::miss()或App::error()去捕获404并跳转到index.html——这不可行。因为那是PHP层的404，而Vue路由的404发生在Apache/Nginx找不到文件时，请求压根没进PHP进程。
- 本地测试Apache配置：用
curl -I http://localhost/nonexistent-path看返回是否是200 +index.html内容 - Nginx测试：删掉
location @vue，刷新Vue页面，确认返回404；加上后再试 - 别依赖浏览器F5“好像能用”，要验证Network面板里每个路由请求的状态码和响应体
最麻烦的点其实是路径嵌套：比如ThinkPHP在/api/，Vue在/，但静态资源又通过/static/加载——这时候RewriteCond和location的正则优先级、静态文件扩展名列表，一个漏掉就会导致CSS或JS 404，进而整个Vue应用启动失败。
