如何编辑Laravel Horizon视图？已完成安装测试但不熟悉Vue实现

DevOps 小满

2026-5-26

自定义Laravel Horizon视图的分步指导

既然你已经成功安装并测试了Horizon，现在想自定义它的视图，我来一步步帮你搞定——哪怕你对Vue.js不熟悉也没关系，我们从简单的修改开始，再进阶到Vue组件的调整。

1. 先发布Horizon的资源文件（必做）

Horizon的默认视图和前端资源是放在包内部的，直接修改vendor目录里的文件会在Horizon更新时被覆盖，所以第一步要把这些资源发布到你的项目目录中：

在终端运行这个Artisan命令：

php artisan horizon:publish

执行后，你会在项目里看到两个关键目录：

resources/views/vendor/horizon：存放Horizon的Blade视图文件（比如入口页面）
public/vendor/horizon：存放编译好的前端资源（JS、CSS、图片等）

2. 简单修改：调整Blade视图（无需Vue知识）

如果只是想修改页面布局、添加静态内容、调整标题或导航，直接编辑resources/views/vendor/horizon/index.blade.php就可以。

比如，你可以在Vue应用挂载的容器前后添加自定义内容：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自定义Horizon仪表盘</title> <!-- 这里修改标题 -->
    <link href="{{ asset('vendor/horizon/css/app.css') }}" rel="stylesheet">
</head>
<body class="font-sans">
    <!-- 在这里添加自定义头部 -->
    <div class="bg-gray-800 text-white p-4">
        <h1>我的自定义Horizon管理面板</h1>
    </div>

    <div id="horizon"></div> <!-- Vue应用挂载的容器 -->

    <!-- 在这里添加自定义底部 -->
    <div class="bg-gray-100 p-4 text-center text-sm text-gray-600">
        版权所有 © {{ date('Y') }} 我的项目
    </div>

    <script src="{{ asset('vendor/horizon/js/app.js') }}"></script>
</body>
</html>

这种修改不需要任何Vue知识，直接用Blade和HTML/CSS就能搞定。

3. 进阶修改：调整Vue组件（需要基础Vue知识）

如果要修改Horizon的核心UI（比如任务列表、队列统计卡片、仪表盘布局），就需要调整Vue组件了。因为Horizon的JS是预编译好的，我们需要重新构建前端资源：

步骤1：准备Vue开发环境

首先确保你的项目已经安装了Node.js和npm/yarn。然后，把Horizon的前端源码复制到你的项目中（或者直接克隆Horizon仓库到本地）：

git clone https://github.com/laravel/horizon.git
cd horizon/resources/js
npm install

步骤2：修改Vue组件

Horizon的Vue组件都在horizon/resources/js/components目录下，比如：

Dashboard.vue：主仪表盘组件
JobsTable.vue：任务列表组件
QueueCard.vue：队列统计卡片组件

你可以根据需求修改这些组件的模板、样式或逻辑。比如，修改QueueCard.vue来调整队列卡片的显示样式：

<template>
    <div class="bg-white rounded-lg shadow p-4">
        <!-- 自定义卡片标题 -->
        <h3 class="text-lg font-bold text-gray-800 mb-2">{{ queue.name }}</h3>
        <!-- 修改统计数字的颜色 -->
        <div class="text-3xl font-bold text-green-600">{{ queue.size }}</div>
        <p class="text-sm text-gray-500">待处理任务</p>
    </div>
</template>

步骤3：重新编译前端资源

修改完组件后，在Horizon的根目录运行编译命令：

npm run prod

编译完成后，把生成的horizon/public/js/app.js和horizon/public/css/app.css复制到你的项目的public/vendor/horizon目录下，覆盖原来的文件。

步骤4：刷新页面查看效果

现在访问你的Horizon仪表盘，就能看到修改后的Vue组件效果了。

注意事项

每次Horizon更新后，你可能需要重新发布资源并合并你的自定义修改（所以建议把自定义的视图和组件修改提交到你的项目Git仓库）
如果只是小范围调整UI，也可以通过自定义CSS来覆盖Horizon的默认样式，比如在index.blade.php中引入自己的CSS文件，无需修改Vue组件

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

如何编辑Laravel Horizon视图？已完成安装测试但不熟悉Vue实现

1. 先发布Horizon的资源文件（必做） #

2. 简单修改：调整Blade视图（无需Vue知识） #

3. 进阶修改：调整Vue组件（需要基础Vue知识） #

步骤1：准备Vue开发环境 #

步骤2：修改Vue组件 #

步骤3：重新编译前端资源 #

步骤4：刷新页面查看效果 #

注意事项 #