很多 Vue3 新手容易陷入一种尴尬的局面ref、reactive、computed 这些 API 都看过了简单页面也能写出来但真的打开终端准备从头搭一个能拿得出手的项目时却不知道第一行命令该敲什么也不知道目录该怎么组织、接口该怎么对接、跨域该怎么处理。尤其是“AI 监控系统”这种听起来很有分量的项目很多人还没开始就被“AI”两个字吓退觉得自己得先会训练模型才行。这里我想先给一个明确判断用 Vue3 做 AI 监控系统的前端真正的难点从来不是 AI 算法而是三件事——工程化项目骨架、视频流接入、实时检测结果的可视化。这三件事恰恰是已经掌握 Vue 基础的人能立刻上手并产生价值的地方。模型训练和推理通常由后端 Python 服务负责前端要做的是把检测结果变成用户能看懂、能操作、能管理的中控界面。把这条边界想清楚你才会知道这 1 个小时该把精力花在哪里。本文会从零开始带你完成 Vue3 Vite 项目搭建然后实现一个监控系统前端 Demo包含视频画面播放、检测框叠加、实时统计卡片、告警记录列表并预留对接真实 AI 检测服务的标准接口。全程会给你可以直接复制的代码并说明每一步为什么这样做。理想情况下跟随本文的路径一步步操作一小时左右可以跑通前端闭环如果你在环境版本上遇到问题时间会稍长一些但这比你自己从散落的知识点里拼凑出一条项目路径要快得多。文章末尾我还会额外讲清楚真实项目里的工程化与合规注意事项这一部分建议你收藏后面做生产项目时会用到。1. Vue3 在 AI 监控系统里到底负责什么很多初学者对“AI 监控系统”的理解是前端要负责识别画面里的人、车、异常行为。这是个误区。如果你把“AI 检测”这件事全部压到前端那基本做不成——浏览器里直接跑目标检测模型既受性能限制又受模型体积和 GPU 资源限制现实中很少这么干。一个典型的 AI 监控系统逻辑上是分层的层级技术栈主要职责前端展示层Vue3、Vite、ECharts、WebSocket视频播放、检测结果可视化、告警管理、设备状态展示后端服务层Java / Node.js / Go 等设备接入、视频流转发、告警记录、权限控制、数据存储AI 推理层Python、PyTorch、YOLO 系列模型视频抽帧、目标检测、行为识别、结果输出摄像头产生视频流后由后端或边缘网关将视频流抽帧送入 AI 模型推理模型输出检测框坐标、目标类别和置信度后端再把这些数据封装成 JSON 通过接口或 WebSocket 推给前端。前端 Vue3 拿到数据后在视频画面上绘制矩形框、标签同时更新告警列表和统计图表。所以Vue3 在 AI 监控系统里的核心职责可以归纳为四块视频流接入与播放控制。检测结果叠加展示也就是在画面上画框、标类别。告警信息管理包括告警列表、告警详情、处理状态。数据可视化用图表展示实时统计、趋势、设备在线率等。把这些职责拆开你会发现它并不是一个“高不可攀”的项目而是一个典型的“后台管理系统 视频播放 数据可视化”的综合前端项目。本文后面的步骤也是围绕这四个职责来展开的。2. 环境准备与版本选择实战之前先把环境准备好。AI 监控系统的前端开发不需要安装 Python 或 PyTorch这一点先明确避免你把时间和磁盘空间花在不必要的地方。你真正需要准备的是下面几项。2.1 Node.js 运行时Vue3 项目依赖 Node.js。建议安装 LTS长期支持版本Node.js 18 及以上对当前主流的 Vite 版本支持更好。版本过低会导致后续依赖安装失败或者运行npm run dev时直接报错。检查是否已安装打开终端执行node -v npm -v如果没有输出或者版本过低去 Node.js 官网下载对应操作系统的 LTS 安装包安装完成后重新打开终端确认。2.2 包管理器npm 会随 Node.js 一起安装所以最少只需 npm 即可完成本文全部操作。如果你本机已经安装了 pnpm 或 yarn也可以使用它们的核心命令差异不大。pnpm 的安装速度更快、磁盘占用更少这里也推荐你后续尝试。检查命令npm -v pnpm -v输出 pnpm 版本号说明已经安装如果没有可以执行npm install -g pnpm全局安装。2.3 编辑器与插件推荐使用 VSCode并安装两个关键插件VolarVue3 官方推荐的语法插件提供模板语法高亮、类型检查、自动补全。TypeScript Vue PluginVolar支持在 Vue 单文件组件中提供更完整的类型支持。这里要特别提醒一个常见坑早期 Vue2 项目用的 Vetur 插件在 Vue3 项目中会冲突。如果你同时安装了 Vetur建议在 Vue3 项目中禁用或卸载否则容易出现模板语法提示混乱、组件导入报错等问题。2.4 浏览器Chrome 或 Edge 都可以。开发阶段需要通过浏览器访问 Vite 启动的本地服务地址并且用开发者工具查看接口请求和前端报错。建议对浏览器开发者工具的基础操作熟悉一点后面排查问题会频繁用到。3. 从零创建一个 Vue3 项目环境就绪后开始创建项目。这里我们直接使用 Vite 官方脚手架。Vite 是目前 Vue3 项目最主流的前端构建工具开发服务器启动速度快HMR热更新体验好配置也比较简洁。在终端执行以下命令npm create vitelatest my-ai-monitor -- --template vue执行之后脚手架会创建一个名为my-ai-monitor的目录并生成一个 Vue3 基础项目。如果你用的是 pnpmpnpm create vite my-ai-monitor --template vue接下来进入项目目录安装依赖cd my-ai-monitor npm install依赖安装完成后先启动一次确认基础项目没问题npm run dev默认情况下终端会输出一个本地访问地址通常是http://localhost:5173。在浏览器打开这个地址如果能出现 Vite Vue 的默认欢迎页说明项目创建成功。此时你可以在 VSCode 中打开项目看一下生成的目录结构my-ai-monitor/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── index.html ├── package.json └── vite.config.js这里src目录是核心开发目录。App.vue是根组件main.js是入口文件。后续我们会在src下继续补充api、mock、components等目录。创建项目这一步虽然简单但有不少人卡住常见原因有两个一是 Node.js 版本过低导致脚手架安装或依赖安装阶段报错二是网络原因导致npm install很慢或超时此时可以考虑切换为国内 npm 镜像源例如npm config set registry https://registry.npmmirror.com。这一步不影响项目本身只是为了加快依赖下载。4. 设计监控页面的组件结构演示项目不要直接在一个组件里写完所有逻辑否则后面扩展会非常痛苦。即便只是 Demo也要按真实项目的组织方式拆分组件。4.1 目录规划我建议在src下创建以下目录与文件src/ ├── api/ │ └── monitor.js ├── components/ │ ├── VideoMonitor.vue │ ├── StatsCard.vue │ └── AlertList.vue ├── mock/ │ └── mockData.js ├── App.vue └── main.js每个文件只负责一件事api/monitor.js统一封装后端接口请求后续对接真实服务时只需改这里。components/VideoMonitor.vue视频播放区域 检测框叠加。components/StatsCard.vue实时统计卡片例如今日告警数、在线设备数、实时检测数。components/AlertList.vue告警记录列表。mock/mockData.js开发阶段的模拟数据模拟 AI 检测服务返回的结果。这种拆分的好处是页面结构清晰组件可以独立测试也能在不同页面复用。比如StatsCard不仅可以用在监控大屏还可以用在其他管理页面。4.2 数据怎么流动AI 监控系统的前端数据本质上是“检测结果数据的不断流入和展示”。在后端没有就绪的情况下我们先用 mock 数据模拟这个过程。典型的数据结构是这样的{ id: evt_001, timestamp: 2025-06-01 10:30:00, objects: [ { label: person, confidence: 0.92, bbox: [100, 200, 150, 300] }, { label: car, confidence: 0.85, bbox: [400, 300, 200, 120] } ] }其中bbox表示检测框坐标可以约定为[x, y, width, height]也可以约定为[x1, y1, x2, y2]。这个必须和后端对齐否则前端画框会错位。后面我会专门讲坐标换算问题。在 Vue3 中我们使用ref和reactive来管理这些响应式数据。onMounted或setInterval定时刷新就可以模拟出“实时检测”的效果。5. 完整示例代码实现下面进入文章的核心部分。我会按文件顺序给出代码每个文件都说明放在什么路径、完成什么功能以及为什么这样写。5.1 mock 数据文件文件路径src/mock/mockData.js// 模拟 AI 检测服务返回的数据 export function getMockDetectionData() { return { id: evt_ Math.floor(Math.random() * 10000), timestamp: new Date().toLocaleString(zh-CN), objects: [ { label: person, confidence: 0.93, bbox: [100, 200, 150, 300] }, { label: car, confidence: 0.87, bbox: [420, 280, 220, 130] }, { label: person, confidence: 0.78, bbox: [700, 380, 120, 260] } ] }; } // 模拟告警记录 export const mockAlerts [ { id: 1, time: 2025-06-01 09:12:30, type: 人员闯入, level: 高, status: 未处理 }, { id: 2, time: 2025-06-01 09:35:10, type: 车辆违停, level: 中, status: 已处理 }, { id: 3, time: 2025-06-01 10:02:45, type: 人员聚集, level: 高, status: 未处理 } ];这个文件的作用是模拟后端返回的检测结果和告警列表。你可以把mockAlerts当成一组静态数据它用于渲染左侧或下方的告警表格getMockDetectionData则是一次次被调用的函数用来模拟实时检测结果。5.2 视频监控与检测框绘制组件文件路径src/components/VideoMonitor.vue这个组件是 AI 监控系统前端最核心的部分。它需要同时完成两件事播放视频画面并在画面上绘制检测框。这里选择用video元素播放视频再用一个canvas覆盖在视频上方绘制检测框。引入 canvas 是因为浏览器不能直接在 video 上持久绘制图形而 canvas 可以方便地在每一帧或每次新数据到达时重绘。template div classvideo-monitor div classvideo-wrapper video refvideoRef classvideo-player src/videos/demo.mp4 controls muted autoplay /video canvas refcanvasRef classvideo-canvas/canvas /div div classdetection-info p当前检测目标数{{ detectionCount }}/p p最近更新时间{{ lastUpdateTime }}/p /div /div /template script setup import { ref, onMounted, onBeforeUnmount } from vue; import { getMockDetectionData } from ../mock/mockData; const videoRef ref(null); const canvasRef ref(null); const detectionCount ref(0); const lastUpdateTime ref(); let timer null; function drawDetections(objects) { const canvas canvasRef.value; const video videoRef.value; if (!canvas || !video) return; // 设置 canvas 与 video 的显示尺寸一致 canvas.width video.clientWidth; canvas.height video.clientHeight; const ctx canvas.getContext(2d); ctx.clearRect(0, 0, canvas.width, canvas.height); const videoWidth video.videoWidth || 1280; const videoHeight video.videoHeight || 720; const scaleX canvas.width / videoWidth; const scaleY canvas.height / videoHeight; objects.forEach((obj) { const [x, y, w, h] obj.bbox; const drawX x * scaleX; const drawY y * scaleY; const drawW w * scaleX; const drawH h * scaleY; ctx.strokeStyle #00ff88; ctx.lineWidth 2; ctx.strokeRect(drawX, drawY, drawW, drawH); ctx.fillStyle rgba(0, 255, 136, 0.8); ctx.font 14px sans-serif; ctx.fillText( ${obj.label} ${(obj.confidence * 100).toFixed(1)}%, drawX, drawY - 6 ); }); } function loadMockDetection() { const data getMockDetectionData(); detectionCount.value data.objects.length; lastUpdateTime.value data.timestamp; drawDetections(data.objects); } onMounted(() { // 启动定时器模拟实时检测数据推送 loadMockDetection(); timer setInterval(loadMockDetection, 3000); }); onBeforeUnmount(() { if (timer) { clearInterval(timer); } }); /script style scoped .video-wrapper { position: relative; width: 100%; max-width: 960px; background: #000; } .video-player { width: 100%; display: block; } .video-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .detection-info { margin-top: 10px; display: flex; gap: 20px; font-size: 14px; } /style代码中的关键逻辑是坐标换算。AI 模型返回的检测框坐标通常是在原始视频分辨率下的坐标例如视频原始分辨率是 1920x1080模型给了bbox: [100, 200, 150, 300]这个坐标直接画在canvas上会错位因为 canvas 的实际显示尺寸可能只有 800 宽。所以必须先计算缩放比例再绘制。scaleX 和 scaleY 就是原始视频尺寸与当前显示尺寸的比例。如果你本机没有public/videos/demo.mp4这个文件视频区域会黑屏但 canvas 上的检测框和右侧信息仍然会正常更新不影响理解。你可以自行准备一段 mp4 监控视频放到public/videos目录下。5.3 统计卡片组件文件路径src/components/StatsCard.vue统计卡片用于展示系统整体运行状态。它接收一个title和value是一个低耦合的通用组件。template div classstats-card div classstats-title{{ title }}/div div classstats-value{{ value }}/div /div /template script setup defineProps({ title: { type: String, required: true }, value: { type: [String, Number], required: true } }); /script style scoped .stats-card { background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); text-align: center; } .stats-title { font-size: 14px; color: #666; margin-bottom: 8px; } .stats-value { font-size: 28px; font-weight: 600; color: #1a1a1a; } /style这样的组件好处是接数据方便。你可以在父组件里准备一个stats对象然后通过v-for批量渲染多个卡片而不是在每个页面里复制卡片样式。5.4 告警列表组件文件路径src/components/AlertList.vue告警列表展示系统产生的告警记录。同样这里先用静态 mock 数据后续替换成接口数据。template div classalert-list h3告警记录/h3 el-table :dataalerts stripe stylewidth: 100% el-table-column proptime label时间 width180/el-table-column el-table-column proptype label告警类型/el-table-column el-table-column proplevel label级别 width80/el-table-column el-table-column propstatus label状态 width100/el-table-column /el-table /div /template script setup import { ref } from vue; import { mockAlerts } from ../mock/mockData; const alerts ref(mockAlerts); /script style scoped .alert-list { background: #ffffff; border-radius: 8px; padding: 16px; } /style这里使用了el-table这种组件标签需要额外引入 Element Plus 组件库。如果你不想引入 Element Plus可以把这个组件改成原生表格。不过在实际项目中像告警列表这种信息密度高、需要排序和分页的列表使用成熟的组件库会更高效。Element Plus 的安装方式很简单npm install element-plus然后在src/main.js中全局注册import { createApp } from vue; import ElementPlus from element-plus; import element-plus/dist/index.css; import App from ./App.vue; const app createApp(App); app.use(ElementPlus); app.mount(#app);需要注意Element Plus 的当前使用版本以官方文档为准版本升级后个别组件的用法可能略有调整。5.5 API 封装与开发代理文件路径src/api/monitor.js真实项目中前端不会直接去 import mock 数据而是通过 axios 请求后端接口。这里我们先封装一个规范接口层后续如果后端就绪只改这里的请求地址和解析逻辑即可。import axios from axios; // 基于 Vite 环境变量配置后端地址 const BASE_URL import.meta.env.VITE_API_BASE_URL || ; const request axios.create({ baseURL: BASE_URL, timeout: 10000 }); // 获取实时检测结果 export function getRealTimeDetections() { return request.get(/api/monitor/detections); } // 获取告警列表 export function getAlertList(params) { return request.get(/api/monitor/alerts, { params }); }需要安装 axiosnpm install axios开发阶段前端项目的地址是http://localhost:5173后端接口地址可能是http://localhost:8080。如果直接请求会触发浏览器跨域限制。解决办法是在vite.config.js中配置开发代理让前端把/api开头的请求转发到后端服务。文件路径vite.config.jsimport { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } });配置完成后前端代码里请求/api/monitor/detections实际会被 Vite 代理转发到http://localhost:8080/api/monitor/detections。这样浏览器里看到的是同源请求不会报跨域错误。5.6 组装页面 App.vue文件路径src/App.vue接下来把上面的组件组装到主页面中。template div classmonitor-page header classpage-header h1AI 智能监控系统/h1 /header section classstats-row StatsCard title在线设备 :value128 / StatsCard title今日告警 :value36 / StatsCard title实时检测目标 :valuedetectionTotal / /section section classmain-layout div classvideo-area VideoMonitor / /div div classalert-area AlertList / /div /section /div /template script setup import { ref } from vue; import StatsCard from ./components/StatsCard.vue; import VideoMonitor from ./components/VideoMonitor.vue; import AlertList from ./components/AlertList.vue; const detectionTotal ref(0); // 这里可以进一步对接 API实时更新 detectionTotal /script style scoped .monitor-page { padding: 24px; background: #f5f7fa; min-height: 100vh; } .page-header { margin-bottom: 20px; } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } .main-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } media (max-width: 768px) { .main-layout { grid-template-columns: 1fr; } } /style到这里一个可以运行的 AI 监控系统前端 Demo 就成型了。页面包括顶部标题、三张统计卡片、左侧视频监控区域、右侧告警列表。视频区域会每 3 秒刷新一次检测框数据模拟实时检测效果。6. 给 AI 检测能力留一个标准接口很多人做完上面的 Demo 后会问真实项目里检测结果到底怎么来这里必须把前后端协作方式讲清楚。真实 AI 监控系统里视频流通常不是直接由前端推给模型的。标准流程是摄像头推流到后端媒体服务或边缘计算网关后端将视频流解码并按一定频率抽帧抽出的画面送入 AI 模型推理模型输出检测框和分类结果最后由后端通过 WebSocket 推给前端。也就是说前端拿到的永远是“已经检测完成的结果”而不是“需要检测的视频帧”。用 WebSocket 推送是更贴近实时监控的做法。相比 HTTP 轮询WebSocket 可以让后端在检测结果产生时主动推给前端延迟更低前端不需要反复发起无意义的请求。当需要展示视频流画面时有两种常见思路前端直接播放视频流地址由后端将 RTSP 等协议转换成 HLS 或 WebRTC再交给浏览器播放。浏览器不能直接播放 RTSP 协议这一点要记住。画面由前端播放检测框数据由 WebSocket 推送前端拿到数据后在 canvas 上绘制。检测框坐标必须以视频帧的原始分辨率换算。下面是一个简单的 WebSocket 使用示例你可以在VideoMonitor.vue中替换掉定时器逻辑let socket null; function connectWebSocket() { socket new WebSocket(ws://localhost:8080/ws/monitor); socket.onopen () { console.log(WebSocket 连接已建立); }; socket.onmessage (event) { const data JSON.parse(event.data); detectionCount.value data.objects.length; lastUpdateTime.value data.timestamp; drawDetections(data.objects); }; socket.onclose () { console.log(WebSocket 连接断开); // 实际项目中要做断线重连处理 }; } onMounted(() { connectWebSocket(); }); onBeforeUnmount(() { if (socket) { socket.close(); } });真实项目中WebSocket 地址需要通过环境变量配置并且连接建立后要处理后端主动下发的鉴权信息。连接断开时要实现指数退避重连不能死循环请求否则会打爆后端。7. 运行、验证与联调现在来验证整个系统。在项目根目录执行npm run dev终端会输出类似这样的信息VITE v5.0.0 ready in 520 ms ➜ Local: http://localhost:5173/在浏览器中打开http://localhost:5173你应该看到页面顶部是“AI 智能监控系统”标题。三张统计卡片显示设备数、告警数和实时检测目标数。视频区域播放本地视频同时绿色矩形框和标签每隔几秒刷新一次。右侧告警列表包含三条模拟告警。如果页面能正常显示这些内容说明 Vue3 项目搭建和基础组件运行已经成功。接下来可以把 5.1 节中的 mock 数据换成真实接口验证。切换方式非常简单在api/monitor.js中调用真实接口然后在组件里使用axios请求替换getMockDetectionData。验证联调时打开浏览器开发者工具的 Network 面板查看请求是否发到后端地址状态码是否为 200响应数据是否符合预期格式。需要特别注意的是真实后端返回的数据结构与 mock 数据很可能不一致。联调第一步永远是先确认字段名和坐标格式而不是急着渲染。用一个最简单的接口先打通链路比一次对接所有接口要稳得多。8. 常见问题与排查方法下面把 Vue3 开发 AI 监控系统时最容易遇到的问题整理成一张排查表。问题现象可能原因排查方式解决方案npm run dev报错或启动失败Node.js 版本过低不满足 Vite 要求执行node -v查看版本号升级到 Node.js 18 及以上 LTS 版本端口 5173 被占用本地已有进程占用默认端口看终端报错信息中是否提示端口占用在vite.config.js中修改server.port或关闭占用进程检测框位置明显偏移bbox 坐标未按视频原始分辨率换算检查 drawDetections 中的 scaleX/scaleY 计算使用原始视频宽高与 canvas 显示宽高计算缩放比例接口请求报跨域错误开发代理未生效或请求路径不是以/api开头打开 Network 面板查看请求 URL在vite.config.js中配置 server.proxy并确保请求路径匹配代理前缀视频区域黑屏视频文件不存在或格式不受浏览器支持检查public/videos目录下是否有文件放入 mp4 格式文件如果是 RTSP 流需要后端转 HLS/WebRTCWebSocket 连接失败后端服务未启动或 ws 地址错误先访问后端 HTTP 接口确认服务可用检查 WebSocket 地址与环境变量加入断线重连机制Volar 提示代码异常安装了旧版 Vetur 插件导致冲突查看插件列表禁用或卸载 Vetur安装 Volar列表数据量过大导致页面卡顿一次性渲染大量 DOM 节点查看列表渲染总数使用分页或虚拟滚动方案这张表是排错的起点。真实项目中的问题往往不是单个原因而是多个因素叠加。遇到问题时从终端日志、浏览器控制台、Network 请求三个位置同时看能缩小排查范围。9. 工程化最佳实践与安全提醒Demo 能跑通只是第一步。如果你打算把这个项目往简历作品集或真实业务方向发展下面几个工程化和安全方面的建议值得认真对待。9.1 目录分层与状态管理当项目规模变大后建议把components进一步细分为common、feature、layout等子目录同时把业务逻辑提取到composables组合式函数中。检测数据、告警数据、设备状态这些跨组件共享的数据建议统一用一个状态管理库管理。Vue3 生态中推荐 Pinia它比 Vuex 更简单也更贴合组合式 API 的风格。不要把所有接口请求都写在组件里。统一走api目录封装再配合接口响应拦截器处理错误信息和登录失效跳转这是前端工程的底线规范。9.2 环境变量与配置管理不同环境的后端地址、WebSocket 地址、是否需要 mock都应该通过环境变量控制。Vite 项目使用.env.development、.env.production文件然后在代码中用import.meta.env访问。# .env.development VITE_API_BASE_URL/api VITE_WS_URLws://localhost:8080/ws/monitor# .env.production VITE_API_BASE_URLhttps://monitor.example.com/api VITE_WS_URLwss://monitor.example.com/ws/monitor核心原则是代码库里不出现硬编码的后端 IP、密钥或账号密码。任何敏感信息一旦提交到 Git即使后面删除也可能留在提交历史里。9.3 性能优化视频监控页面的性能瓶颈通常集中在 canvas 绘制和列表渲染。检测结果每次推送时不需要整块 canvas 全部清空重绘可以只在检测框变化时更新。当告警记录非常多时使用虚拟滚动组件避免一次性创建上千个 DOM 节点。另外如果需要在同一个页面同时播放多路视频请务必限制视频数量并且在后端做转码和码率适配。前端一次播放超过 8 路高清视频即使浏览器能撑住用户体验也会严重下降。9.4 安全与合规提醒这是整个项目中必须反复强调的部分。AI 监控系统可能涉及人脸、车牌、人员轨迹等个人信息。无论做什么功能都必须遵守合法合规原则。这里给出几条底线建议系统部署和测试必须获得明确授权不得用于未经许可的监控场景。视频和检测结果默认做脱敏处理人脸、车牌等敏感信息在界面展示时要打码或隐藏。系统要有完整的访问控制和审计日志前端不能直接暴露后端管理接口。生产环境必须使用 HTTPS 和 WSS防止视频和检测数据在传输中被截获。后端接口必须做权限校验不能仅靠前端隐藏入口来保护数据。安全不是上线前临时加的功能而是系统设计的一部分。前端工程师在联调时就要确认接口鉴权方案和数据脱敏策略否则后面返工的成本会很高。10. 总结与下一步学习方向到这里你已经完成了从零搭建 Vue3 项目到实现一个 AI 监控系统前端 Demo 的完整闭环。回顾一下你实际上已经掌握了几个核心能力使用 Vite 创建 Vue3 项目并管理工程结构用 canvas 在视频画面上绘制实时检测框通过 mock 数据模拟前后端联调使用 axios 封装接口并配置 Vite 开发代理理解 WebSocket 在实时监控场景中的接入方式。接下来往哪个方向深入取决于你的目标。如果你想把这个 Demo 变成能展示的项目建议先补充 Vue Router 做页面跳转再引入 Pinia 管理全局状态然后把 mock 数据替换成真实接口联调。如果你想深入 AI 监控的算法侧可以从 YOLO 系列模型和 PyTorch 环境搭建开始学习但那是另一条技术栈和应用前端是两条并行路线。最后给你一个非常实际的建议不要停留在“能跑”就满足。尝试给视频源换成一棵真实的 RTSP 摄像头流尝试让告警列表支持点击查看检测框详情尝试在后端模拟一个简单的检测服务把数据推给前端。这些“再往前走一步”的过程才是你把 Vue3 真正用到生产级 AI 监控系统的关键。建议你先把这篇文章收藏起来需要时按照步骤操作有任何一步卡住了可以对照常见问题排查表逐条检查环境、请求、坐标系这三个最容易出问题的地方。 
长河君 · 2026/9/4 10:47:38 · 阅读 1.2k Vue3 + Vite 搭建AI监控系统前端：视频流与检测框可视化实战
很多 Vue3 新手容易陷入一种尴尬的局面ref、reactive、computed 这些 API 都看过了简单页面也能写出来但真的打开终端准备从头搭一个能拿得出手的项目时却不知道第一行命令该敲什么也不知道目录该怎么组织、接口该怎么对接、跨域该怎么处理。尤其是“AI 监控系统”这种听起来很有分量的项目很多人还没开始就被“AI”两个字吓退觉得自己得先会训练模型才行。这里我想先给一个明确判断用 Vue3 做 AI 监控系统的前端真正的难点从来不是 AI 算法而是三件事——工程化项目骨架、视频流接入、实时检测结果的可视化。这三件事恰恰是已经掌握 Vue 基础的人能立刻上手并产生价值的地方。模型训练和推理通常由后端 Python 服务负责前端要做的是把检测结果变成用户能看懂、能操作、能管理的中控界面。把这条边界想清楚你才会知道这 1 个小时该把精力花在哪里。本文会从零开始带你完成 Vue3 Vite 项目搭建然后实现一个监控系统前端 Demo包含视频画面播放、检测框叠加、实时统计卡片、告警记录列表并预留对接真实 AI 检测服务的标准接口。全程会给你可以直接复制的代码并说明每一步为什么这样做。理想情况下跟随本文的路径一步步操作一小时左右可以跑通前端闭环如果你在环境版本上遇到问题时间会稍长一些但这比你自己从散落的知识点里拼凑出一条项目路径要快得多。文章末尾我还会额外讲清楚真实项目里的工程化与合规注意事项这一部分建议你收藏后面做生产项目时会用到。1. Vue3 在 AI 监控系统里到底负责什么很多初学者对“AI 监控系统”的理解是前端要负责识别画面里的人、车、异常行为。这是个误区。如果你把“AI 检测”这件事全部压到前端那基本做不成——浏览器里直接跑目标检测模型既受性能限制又受模型体积和 GPU 资源限制现实中很少这么干。一个典型的 AI 监控系统逻辑上是分层的层级技术栈主要职责前端展示层Vue3、Vite、ECharts、WebSocket视频播放、检测结果可视化、告警管理、设备状态展示后端服务层Java / Node.js / Go 等设备接入、视频流转发、告警记录、权限控制、数据存储AI 推理层Python、PyTorch、YOLO 系列模型视频抽帧、目标检测、行为识别、结果输出摄像头产生视频流后由后端或边缘网关将视频流抽帧送入 AI 模型推理模型输出检测框坐标、目标类别和置信度后端再把这些数据封装成 JSON 通过接口或 WebSocket 推给前端。前端 Vue3 拿到数据后在视频画面上绘制矩形框、标签同时更新告警列表和统计图表。所以Vue3 在 AI 监控系统里的核心职责可以归纳为四块视频流接入与播放控制。检测结果叠加展示也就是在画面上画框、标类别。告警信息管理包括告警列表、告警详情、处理状态。数据可视化用图表展示实时统计、趋势、设备在线率等。把这些职责拆开你会发现它并不是一个“高不可攀”的项目而是一个典型的“后台管理系统 视频播放 数据可视化”的综合前端项目。本文后面的步骤也是围绕这四个职责来展开的。2. 环境准备与版本选择实战之前先把环境准备好。AI 监控系统的前端开发不需要安装 Python 或 PyTorch这一点先明确避免你把时间和磁盘空间花在不必要的地方。你真正需要准备的是下面几项。2.1 Node.js 运行时Vue3 项目依赖 Node.js。建议安装 LTS长期支持版本Node.js 18 及以上对当前主流的 Vite 版本支持更好。版本过低会导致后续依赖安装失败或者运行npm run dev时直接报错。检查是否已安装打开终端执行node -v npm -v如果没有输出或者版本过低去 Node.js 官网下载对应操作系统的 LTS 安装包安装完成后重新打开终端确认。2.2 包管理器npm 会随 Node.js 一起安装所以最少只需 npm 即可完成本文全部操作。如果你本机已经安装了 pnpm 或 yarn也可以使用它们的核心命令差异不大。pnpm 的安装速度更快、磁盘占用更少这里也推荐你后续尝试。检查命令npm -v pnpm -v输出 pnpm 版本号说明已经安装如果没有可以执行npm install -g pnpm全局安装。2.3 编辑器与插件推荐使用 VSCode并安装两个关键插件VolarVue3 官方推荐的语法插件提供模板语法高亮、类型检查、自动补全。TypeScript Vue PluginVolar支持在 Vue 单文件组件中提供更完整的类型支持。这里要特别提醒一个常见坑早期 Vue2 项目用的 Vetur 插件在 Vue3 项目中会冲突。如果你同时安装了 Vetur建议在 Vue3 项目中禁用或卸载否则容易出现模板语法提示混乱、组件导入报错等问题。2.4 浏览器Chrome 或 Edge 都可以。开发阶段需要通过浏览器访问 Vite 启动的本地服务地址并且用开发者工具查看接口请求和前端报错。建议对浏览器开发者工具的基础操作熟悉一点后面排查问题会频繁用到。3. 从零创建一个 Vue3 项目环境就绪后开始创建项目。这里我们直接使用 Vite 官方脚手架。Vite 是目前 Vue3 项目最主流的前端构建工具开发服务器启动速度快HMR热更新体验好配置也比较简洁。在终端执行以下命令npm create vitelatest my-ai-monitor -- --template vue执行之后脚手架会创建一个名为my-ai-monitor的目录并生成一个 Vue3 基础项目。如果你用的是 pnpmpnpm create vite my-ai-monitor --template vue接下来进入项目目录安装依赖cd my-ai-monitor npm install依赖安装完成后先启动一次确认基础项目没问题npm run dev默认情况下终端会输出一个本地访问地址通常是http://localhost:5173。在浏览器打开这个地址如果能出现 Vite Vue 的默认欢迎页说明项目创建成功。此时你可以在 VSCode 中打开项目看一下生成的目录结构my-ai-monitor/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── index.html ├── package.json └── vite.config.js这里src目录是核心开发目录。App.vue是根组件main.js是入口文件。后续我们会在src下继续补充api、mock、components等目录。创建项目这一步虽然简单但有不少人卡住常见原因有两个一是 Node.js 版本过低导致脚手架安装或依赖安装阶段报错二是网络原因导致npm install很慢或超时此时可以考虑切换为国内 npm 镜像源例如npm config set registry https://registry.npmmirror.com。这一步不影响项目本身只是为了加快依赖下载。4. 设计监控页面的组件结构演示项目不要直接在一个组件里写完所有逻辑否则后面扩展会非常痛苦。即便只是 Demo也要按真实项目的组织方式拆分组件。4.1 目录规划我建议在src下创建以下目录与文件src/ ├── api/ │ └── monitor.js ├── components/ │ ├── VideoMonitor.vue │ ├── StatsCard.vue │ └── AlertList.vue ├── mock/ │ └── mockData.js ├── App.vue └── main.js每个文件只负责一件事api/monitor.js统一封装后端接口请求后续对接真实服务时只需改这里。components/VideoMonitor.vue视频播放区域 检测框叠加。components/StatsCard.vue实时统计卡片例如今日告警数、在线设备数、实时检测数。components/AlertList.vue告警记录列表。mock/mockData.js开发阶段的模拟数据模拟 AI 检测服务返回的结果。这种拆分的好处是页面结构清晰组件可以独立测试也能在不同页面复用。比如StatsCard不仅可以用在监控大屏还可以用在其他管理页面。4.2 数据怎么流动AI 监控系统的前端数据本质上是“检测结果数据的不断流入和展示”。在后端没有就绪的情况下我们先用 mock 数据模拟这个过程。典型的数据结构是这样的{ id: evt_001, timestamp: 2025-06-01 10:30:00, objects: [ { label: person, confidence: 0.92, bbox: [100, 200, 150, 300] }, { label: car, confidence: 0.85, bbox: [400, 300, 200, 120] } ] }其中bbox表示检测框坐标可以约定为[x, y, width, height]也可以约定为[x1, y1, x2, y2]。这个必须和后端对齐否则前端画框会错位。后面我会专门讲坐标换算问题。在 Vue3 中我们使用ref和reactive来管理这些响应式数据。onMounted或setInterval定时刷新就可以模拟出“实时检测”的效果。5. 完整示例代码实现下面进入文章的核心部分。我会按文件顺序给出代码每个文件都说明放在什么路径、完成什么功能以及为什么这样写。5.1 mock 数据文件文件路径src/mock/mockData.js// 模拟 AI 检测服务返回的数据 export function getMockDetectionData() { return { id: evt_ Math.floor(Math.random() * 10000), timestamp: new Date().toLocaleString(zh-CN), objects: [ { label: person, confidence: 0.93, bbox: [100, 200, 150, 300] }, { label: car, confidence: 0.87, bbox: [420, 280, 220, 130] }, { label: person, confidence: 0.78, bbox: [700, 380, 120, 260] } ] }; } // 模拟告警记录 export const mockAlerts [ { id: 1, time: 2025-06-01 09:12:30, type: 人员闯入, level: 高, status: 未处理 }, { id: 2, time: 2025-06-01 09:35:10, type: 车辆违停, level: 中, status: 已处理 }, { id: 3, time: 2025-06-01 10:02:45, type: 人员聚集, level: 高, status: 未处理 } ];这个文件的作用是模拟后端返回的检测结果和告警列表。你可以把mockAlerts当成一组静态数据它用于渲染左侧或下方的告警表格getMockDetectionData则是一次次被调用的函数用来模拟实时检测结果。5.2 视频监控与检测框绘制组件文件路径src/components/VideoMonitor.vue这个组件是 AI 监控系统前端最核心的部分。它需要同时完成两件事播放视频画面并在画面上绘制检测框。这里选择用video元素播放视频再用一个canvas覆盖在视频上方绘制检测框。引入 canvas 是因为浏览器不能直接在 video 上持久绘制图形而 canvas 可以方便地在每一帧或每次新数据到达时重绘。template div classvideo-monitor div classvideo-wrapper video refvideoRef classvideo-player src/videos/demo.mp4 controls muted autoplay /video canvas refcanvasRef classvideo-canvas/canvas /div div classdetection-info p当前检测目标数{{ detectionCount }}/p p最近更新时间{{ lastUpdateTime }}/p /div /div /template script setup import { ref, onMounted, onBeforeUnmount } from vue; import { getMockDetectionData } from ../mock/mockData; const videoRef ref(null); const canvasRef ref(null); const detectionCount ref(0); const lastUpdateTime ref(); let timer null; function drawDetections(objects) { const canvas canvasRef.value; const video videoRef.value; if (!canvas || !video) return; // 设置 canvas 与 video 的显示尺寸一致 canvas.width video.clientWidth; canvas.height video.clientHeight; const ctx canvas.getContext(2d); ctx.clearRect(0, 0, canvas.width, canvas.height); const videoWidth video.videoWidth || 1280; const videoHeight video.videoHeight || 720; const scaleX canvas.width / videoWidth; const scaleY canvas.height / videoHeight; objects.forEach((obj) { const [x, y, w, h] obj.bbox; const drawX x * scaleX; const drawY y * scaleY; const drawW w * scaleX; const drawH h * scaleY; ctx.strokeStyle #00ff88; ctx.lineWidth 2; ctx.strokeRect(drawX, drawY, drawW, drawH); ctx.fillStyle rgba(0, 255, 136, 0.8); ctx.font 14px sans-serif; ctx.fillText( ${obj.label} ${(obj.confidence * 100).toFixed(1)}%, drawX, drawY - 6 ); }); } function loadMockDetection() { const data getMockDetectionData(); detectionCount.value data.objects.length; lastUpdateTime.value data.timestamp; drawDetections(data.objects); } onMounted(() { // 启动定时器模拟实时检测数据推送 loadMockDetection(); timer setInterval(loadMockDetection, 3000); }); onBeforeUnmount(() { if (timer) { clearInterval(timer); } }); /script style scoped .video-wrapper { position: relative; width: 100%; max-width: 960px; background: #000; } .video-player { width: 100%; display: block; } .video-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .detection-info { margin-top: 10px; display: flex; gap: 20px; font-size: 14px; } /style代码中的关键逻辑是坐标换算。AI 模型返回的检测框坐标通常是在原始视频分辨率下的坐标例如视频原始分辨率是 1920x1080模型给了bbox: [100, 200, 150, 300]这个坐标直接画在canvas上会错位因为 canvas 的实际显示尺寸可能只有 800 宽。所以必须先计算缩放比例再绘制。scaleX 和 scaleY 就是原始视频尺寸与当前显示尺寸的比例。如果你本机没有public/videos/demo.mp4这个文件视频区域会黑屏但 canvas 上的检测框和右侧信息仍然会正常更新不影响理解。你可以自行准备一段 mp4 监控视频放到public/videos目录下。5.3 统计卡片组件文件路径src/components/StatsCard.vue统计卡片用于展示系统整体运行状态。它接收一个title和value是一个低耦合的通用组件。template div classstats-card div classstats-title{{ title }}/div div classstats-value{{ value }}/div /div /template script setup defineProps({ title: { type: String, required: true }, value: { type: [String, Number], required: true } }); /script style scoped .stats-card { background: #ffffff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); text-align: center; } .stats-title { font-size: 14px; color: #666; margin-bottom: 8px; } .stats-value { font-size: 28px; font-weight: 600; color: #1a1a1a; } /style这样的组件好处是接数据方便。你可以在父组件里准备一个stats对象然后通过v-for批量渲染多个卡片而不是在每个页面里复制卡片样式。5.4 告警列表组件文件路径src/components/AlertList.vue告警列表展示系统产生的告警记录。同样这里先用静态 mock 数据后续替换成接口数据。template div classalert-list h3告警记录/h3 el-table :dataalerts stripe stylewidth: 100% el-table-column proptime label时间 width180/el-table-column el-table-column proptype label告警类型/el-table-column el-table-column proplevel label级别 width80/el-table-column el-table-column propstatus label状态 width100/el-table-column /el-table /div /template script setup import { ref } from vue; import { mockAlerts } from ../mock/mockData; const alerts ref(mockAlerts); /script style scoped .alert-list { background: #ffffff; border-radius: 8px; padding: 16px; } /style这里使用了el-table这种组件标签需要额外引入 Element Plus 组件库。如果你不想引入 Element Plus可以把这个组件改成原生表格。不过在实际项目中像告警列表这种信息密度高、需要排序和分页的列表使用成熟的组件库会更高效。Element Plus 的安装方式很简单npm install element-plus然后在src/main.js中全局注册import { createApp } from vue; import ElementPlus from element-plus; import element-plus/dist/index.css; import App from ./App.vue; const app createApp(App); app.use(ElementPlus); app.mount(#app);需要注意Element Plus 的当前使用版本以官方文档为准版本升级后个别组件的用法可能略有调整。5.5 API 封装与开发代理文件路径src/api/monitor.js真实项目中前端不会直接去 import mock 数据而是通过 axios 请求后端接口。这里我们先封装一个规范接口层后续如果后端就绪只改这里的请求地址和解析逻辑即可。import axios from axios; // 基于 Vite 环境变量配置后端地址 const BASE_URL import.meta.env.VITE_API_BASE_URL || ; const request axios.create({ baseURL: BASE_URL, timeout: 10000 }); // 获取实时检测结果 export function getRealTimeDetections() { return request.get(/api/monitor/detections); } // 获取告警列表 export function getAlertList(params) { return request.get(/api/monitor/alerts, { params }); }需要安装 axiosnpm install axios开发阶段前端项目的地址是http://localhost:5173后端接口地址可能是http://localhost:8080。如果直接请求会触发浏览器跨域限制。解决办法是在vite.config.js中配置开发代理让前端把/api开头的请求转发到后端服务。文件路径vite.config.jsimport { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } });配置完成后前端代码里请求/api/monitor/detections实际会被 Vite 代理转发到http://localhost:8080/api/monitor/detections。这样浏览器里看到的是同源请求不会报跨域错误。5.6 组装页面 App.vue文件路径src/App.vue接下来把上面的组件组装到主页面中。template div classmonitor-page header classpage-header h1AI 智能监控系统/h1 /header section classstats-row StatsCard title在线设备 :value128 / StatsCard title今日告警 :value36 / StatsCard title实时检测目标 :valuedetectionTotal / /section section classmain-layout div classvideo-area VideoMonitor / /div div classalert-area AlertList / /div /section /div /template script setup import { ref } from vue; import StatsCard from ./components/StatsCard.vue; import VideoMonitor from ./components/VideoMonitor.vue; import AlertList from ./components/AlertList.vue; const detectionTotal ref(0); // 这里可以进一步对接 API实时更新 detectionTotal /script style scoped .monitor-page { padding: 24px; background: #f5f7fa; min-height: 100vh; } .page-header { margin-bottom: 20px; } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } .main-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } media (max-width: 768px) { .main-layout { grid-template-columns: 1fr; } } /style到这里一个可以运行的 AI 监控系统前端 Demo 就成型了。页面包括顶部标题、三张统计卡片、左侧视频监控区域、右侧告警列表。视频区域会每 3 秒刷新一次检测框数据模拟实时检测效果。6. 给 AI 检测能力留一个标准接口很多人做完上面的 Demo 后会问真实项目里检测结果到底怎么来这里必须把前后端协作方式讲清楚。真实 AI 监控系统里视频流通常不是直接由前端推给模型的。标准流程是摄像头推流到后端媒体服务或边缘计算网关后端将视频流解码并按一定频率抽帧抽出的画面送入 AI 模型推理模型输出检测框和分类结果最后由后端通过 WebSocket 推给前端。也就是说前端拿到的永远是“已经检测完成的结果”而不是“需要检测的视频帧”。用 WebSocket 推送是更贴近实时监控的做法。相比 HTTP 轮询WebSocket 可以让后端在检测结果产生时主动推给前端延迟更低前端不需要反复发起无意义的请求。当需要展示视频流画面时有两种常见思路前端直接播放视频流地址由后端将 RTSP 等协议转换成 HLS 或 WebRTC再交给浏览器播放。浏览器不能直接播放 RTSP 协议这一点要记住。画面由前端播放检测框数据由 WebSocket 推送前端拿到数据后在 canvas 上绘制。检测框坐标必须以视频帧的原始分辨率换算。下面是一个简单的 WebSocket 使用示例你可以在VideoMonitor.vue中替换掉定时器逻辑let socket null; function connectWebSocket() { socket new WebSocket(ws://localhost:8080/ws/monitor); socket.onopen () { console.log(WebSocket 连接已建立); }; socket.onmessage (event) { const data JSON.parse(event.data); detectionCount.value data.objects.length; lastUpdateTime.value data.timestamp; drawDetections(data.objects); }; socket.onclose () { console.log(WebSocket 连接断开); // 实际项目中要做断线重连处理 }; } onMounted(() { connectWebSocket(); }); onBeforeUnmount(() { if (socket) { socket.close(); } });真实项目中WebSocket 地址需要通过环境变量配置并且连接建立后要处理后端主动下发的鉴权信息。连接断开时要实现指数退避重连不能死循环请求否则会打爆后端。7. 运行、验证与联调现在来验证整个系统。在项目根目录执行npm run dev终端会输出类似这样的信息VITE v5.0.0 ready in 520 ms ➜ Local: http://localhost:5173/在浏览器中打开http://localhost:5173你应该看到页面顶部是“AI 智能监控系统”标题。三张统计卡片显示设备数、告警数和实时检测目标数。视频区域播放本地视频同时绿色矩形框和标签每隔几秒刷新一次。右侧告警列表包含三条模拟告警。如果页面能正常显示这些内容说明 Vue3 项目搭建和基础组件运行已经成功。接下来可以把 5.1 节中的 mock 数据换成真实接口验证。切换方式非常简单在api/monitor.js中调用真实接口然后在组件里使用axios请求替换getMockDetectionData。验证联调时打开浏览器开发者工具的 Network 面板查看请求是否发到后端地址状态码是否为 200响应数据是否符合预期格式。需要特别注意的是真实后端返回的数据结构与 mock 数据很可能不一致。联调第一步永远是先确认字段名和坐标格式而不是急着渲染。用一个最简单的接口先打通链路比一次对接所有接口要稳得多。8. 常见问题与排查方法下面把 Vue3 开发 AI 监控系统时最容易遇到的问题整理成一张排查表。问题现象可能原因排查方式解决方案npm run dev报错或启动失败Node.js 版本过低不满足 Vite 要求执行node -v查看版本号升级到 Node.js 18 及以上 LTS 版本端口 5173 被占用本地已有进程占用默认端口看终端报错信息中是否提示端口占用在vite.config.js中修改server.port或关闭占用进程检测框位置明显偏移bbox 坐标未按视频原始分辨率换算检查 drawDetections 中的 scaleX/scaleY 计算使用原始视频宽高与 canvas 显示宽高计算缩放比例接口请求报跨域错误开发代理未生效或请求路径不是以/api开头打开 Network 面板查看请求 URL在vite.config.js中配置 server.proxy并确保请求路径匹配代理前缀视频区域黑屏视频文件不存在或格式不受浏览器支持检查public/videos目录下是否有文件放入 mp4 格式文件如果是 RTSP 流需要后端转 HLS/WebRTCWebSocket 连接失败后端服务未启动或 ws 地址错误先访问后端 HTTP 接口确认服务可用检查 WebSocket 地址与环境变量加入断线重连机制Volar 提示代码异常安装了旧版 Vetur 插件导致冲突查看插件列表禁用或卸载 Vetur安装 Volar列表数据量过大导致页面卡顿一次性渲染大量 DOM 节点查看列表渲染总数使用分页或虚拟滚动方案这张表是排错的起点。真实项目中的问题往往不是单个原因而是多个因素叠加。遇到问题时从终端日志、浏览器控制台、Network 请求三个位置同时看能缩小排查范围。9. 工程化最佳实践与安全提醒Demo 能跑通只是第一步。如果你打算把这个项目往简历作品集或真实业务方向发展下面几个工程化和安全方面的建议值得认真对待。9.1 目录分层与状态管理当项目规模变大后建议把components进一步细分为common、feature、layout等子目录同时把业务逻辑提取到composables组合式函数中。检测数据、告警数据、设备状态这些跨组件共享的数据建议统一用一个状态管理库管理。Vue3 生态中推荐 Pinia它比 Vuex 更简单也更贴合组合式 API 的风格。不要把所有接口请求都写在组件里。统一走api目录封装再配合接口响应拦截器处理错误信息和登录失效跳转这是前端工程的底线规范。9.2 环境变量与配置管理不同环境的后端地址、WebSocket 地址、是否需要 mock都应该通过环境变量控制。Vite 项目使用.env.development、.env.production文件然后在代码中用import.meta.env访问。# .env.development VITE_API_BASE_URL/api VITE_WS_URLws://localhost:8080/ws/monitor# .env.production VITE_API_BASE_URLhttps://monitor.example.com/api VITE_WS_URLwss://monitor.example.com/ws/monitor核心原则是代码库里不出现硬编码的后端 IP、密钥或账号密码。任何敏感信息一旦提交到 Git即使后面删除也可能留在提交历史里。9.3 性能优化视频监控页面的性能瓶颈通常集中在 canvas 绘制和列表渲染。检测结果每次推送时不需要整块 canvas 全部清空重绘可以只在检测框变化时更新。当告警记录非常多时使用虚拟滚动组件避免一次性创建上千个 DOM 节点。另外如果需要在同一个页面同时播放多路视频请务必限制视频数量并且在后端做转码和码率适配。前端一次播放超过 8 路高清视频即使浏览器能撑住用户体验也会严重下降。9.4 安全与合规提醒这是整个项目中必须反复强调的部分。AI 监控系统可能涉及人脸、车牌、人员轨迹等个人信息。无论做什么功能都必须遵守合法合规原则。这里给出几条底线建议系统部署和测试必须获得明确授权不得用于未经许可的监控场景。视频和检测结果默认做脱敏处理人脸、车牌等敏感信息在界面展示时要打码或隐藏。系统要有完整的访问控制和审计日志前端不能直接暴露后端管理接口。生产环境必须使用 HTTPS 和 WSS防止视频和检测数据在传输中被截获。后端接口必须做权限校验不能仅靠前端隐藏入口来保护数据。安全不是上线前临时加的功能而是系统设计的一部分。前端工程师在联调时就要确认接口鉴权方案和数据脱敏策略否则后面返工的成本会很高。10. 总结与下一步学习方向到这里你已经完成了从零搭建 Vue3 项目到实现一个 AI 监控系统前端 Demo 的完整闭环。回顾一下你实际上已经掌握了几个核心能力使用 Vite 创建 Vue3 项目并管理工程结构用 canvas 在视频画面上绘制实时检测框通过 mock 数据模拟前后端联调使用 axios 封装接口并配置 Vite 开发代理理解 WebSocket 在实时监控场景中的接入方式。接下来往哪个方向深入取决于你的目标。如果你想把这个 Demo 变成能展示的项目建议先补充 Vue Router 做页面跳转再引入 Pinia 管理全局状态然后把 mock 数据替换成真实接口联调。如果你想深入 AI 监控的算法侧可以从 YOLO 系列模型和 PyTorch 环境搭建开始学习但那是另一条技术栈和应用前端是两条并行路线。最后给你一个非常实际的建议不要停留在“能跑”就满足。尝试给视频源换成一棵真实的 RTSP 摄像头流尝试让告警列表支持点击查看检测框详情尝试在后端模拟一个简单的检测服务把数据推给前端。这些“再往前走一步”的过程才是你把 Vue3 真正用到生产级 AI 监控系统的关键。建议你先把这篇文章收藏起来需要时按照步骤操作有任何一步卡住了可以对照常见问题排查表逐条检查环境、请求、坐标系这三个最容易出问题的地方。