Laravel Vue应用特定URL无法返回页面及404路由配置问题

这是Laravel和Vue Router配合时的常见坑，我来帮你一步步排查解决：

1. 先修正Vue Router的路由路径 #

你的about路由路径少了开头的斜杠，这会让它变成相对路径——从首页跳转可能正常，但直接访问localhost/myapp/about就会找不到组件。修改成：

const router = new VueRouter({ 
  mode: 'history', 
  routes: [ 
    { path: '/', name: 'home', component: Home }, 
    { path: '/about', name: 'about', component: About }, // 这里补上开头的/
  ], 
});

2. 正确配置Laravel的Fallback路由 #

你提到已经加了Route::get('{path}', ...)，但要注意几个关键细节：

• 这个路由必须放在所有其他路由的最后，避免覆盖API、静态资源路由或Laravel自有路由
• 要通过正则匹配所有未被捕获的GET请求，同时确保静态资源不会被拦截
• 正确返回挂载Vue的主视图文件（比如默认的welcome.blade.php）

示例代码（routes/web.php）：

// 先放你的API路由、Laravel页面路由等
Route::get('/api/user', [UserController::class, 'getUser']);

// 最后放Fallback路由，匹配所有未被上面路由捕获的请求
Route::get('/{any}', function () {
    return view('welcome'); // 替换成你的Vue挂载视图
})->where('any', '.*');

3. 配置Web服务器的重写规则（核心！） #

History模式下，Web服务器需要把所有非静态资源的请求重写到Laravel的入口文件index.php，不然直接访问子路由时服务器会返回原生404。

Apache配置 #

检查public/.htaccess文件（Laravel默认自带）是否包含正确的重写规则，同时确保Apache开启了mod_rewrite模块：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # 处理授权头
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # 移除尾部斜杠
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # 所有非静态文件请求转发到index.php
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Nginx配置 #

在你的站点配置中添加如下规则，确保请求先找静态资源，找不到就转发给index.php：

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

4. 验证Vue挂载配置 #

确保Laravel的视图文件（比如welcome.blade.php）正确引入了Vue编译后的资源，并且有正确的挂载元素：

<!-- welcome.blade.php -->
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>

最后测试 #

完成以上步骤后，清除Laravel缓存并重新编译Vue资源：

# 清除路由和配置缓存
php artisan route:clear
php artisan config:clear

# 编译Vue资源（开发环境用dev，生产环境用prod）
npm run dev

现在再访问localhost/myapp/about，应该就能正常加载About组件了。

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