Vue配合Laravel开发时Router history模式刷新404如何处理？

问题根因 #

hash模式下地址栏#后的路径不会发送给服务端，因此刷新时始终请求根路径，不会出现404。切换为history模式后，地址栏路径是真实路径，刷新时浏览器会将完整路径发送给服务端，服务端没有对应路由配置就会返回404。
不建议使用JS强制重定向到首页：该方案会丢失用户当前访问的路径状态，比如用户刷新商品详情页直接跳转到首页，需要二次操作才能回到对应页面，体验极差，也会影响内页SEO抓取。

标准解决方案（优先选服务端配置，性能最优） #

所有方案的核心逻辑都是：服务端收到不存在的路径请求时，返回SPA应用的入口index.html文件，后续路由匹配交给前端Vue Router处理。

方案1：Laravel 路由兜底（配置最简单） #

在Laravel项目的routes/web.php文件最末尾添加兜底路由，所有未匹配到后端路由的GET请求都返回SPA入口：

// 注意：此路由必须放在所有后端路由、接口路由、后台管理路由的最后，避免覆盖正常业务路由
Route::get('/{any}', function () {
    // 如果你的SPA入口是Laravel渲染的视图，替换成你的视图名
    return view('spa');
    // 如果你的SPA入口是public目录下的静态html文件，用下面的写法
    // return file_get_contents(public_path('index.html'));
})->where('any', '.*');

方案2：Web服务器配置兜底（性能更优，推荐生产环境用） #

不需要走Laravel的请求生命周期，直接由web服务器返回入口文件，响应速度更快。

Nginx 配置

在站点对应的server配置块中修改try_files规则：

server {
    # 其他配置省略
    root /path/to/your/project/public;
    index index.html index.php;

    location / {
        # 核心规则：尝试访问当前路径的文件/目录，不存在就返回index.html
        try_files $uri $uri/ /index.html;
    }

    # 保留Laravel原本的php解析配置，不影响后端接口正常使用
    location ~ \.php$ {
        # 原有php解析配置不变
    }
}

Apache 配置

在Laravel项目public目录下的.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>

前端配套配置 #

在Vue Router的路由规则末尾添加404兜底路由，避免用户访问不存在的路径时出现白屏：

const routes = [
  // 其他业务路由省略
  // 404兜底路由，必须放在所有路由的最后
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

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