MiniCPM-o 2.6 Web 前端工程搭建指南基于 Vue 3 Vite pnpm 的本地开发、生产构建与后端代理配置【免费下载链接】MiniCPM-VA Pocket-Sized MLLM for Ultra-Efficient Image and Video Understanding on Your Phone项目地址: https://gitcode.com/GitHub_Trending/mi/MiniCPM-V本篇技术指南以仓库内 web_server/README.md 为骨架系统讲解 MiniCPM-o 2.6 Web 演示前端工程的完整搭建流程环境准备、依赖安装、热更新开发、生产构建以及如何通过vite.config.js的 proxy 配置对接自建后端服务。读完本文你将能够独立在本机跑起这套基于 Vue 3 与 Vite 的语音视频对话前端并将其与 model_server.py 提供的 FastAPI 服务默认端口 32550无缝打通。一、项目定位一套完整的语音视频对话 Web 前端该前端位于 web_demos/minicpm-o_2.6/web_server是 MiniCPM-o 2.6 全模态音频、视频、语音交互能力的浏览器端实现。从 package.json 可以看到其技术栈Vue 3.4 Vite 5.3 Element Plus 2.8 组件库 Pinia 状态管理 vue-router 路由 vue-i18n 国际化中英双语并通过ricky0123/vad-web在浏览器端做语音活动检测VAD。从源码结构看前端目录划分清晰各司其职src/apis/index.js封装与后端交互的 HTTP APIsrc/utils/websocket.js封装带自动重连的 WebSocket 客户端用于流式传输src/hooksHTTP 请求、语音、队列等可复用逻辑src/views/home聊天、语音通话、视频通话等核心界面public/silero_vad_legacy.onnx浏览器端 VAD 所需的 ONNX 模型文件。前后端是分离部署的前端负责交互与渲染后端 model_server.py 负责加载openbmb/MiniCPM-o-2_6模型并提供流式推理接口。因此“前端如何找到后端”是搭建过程中的关键环节本文第三节将重点展开。二、环境准备Node 与 pnpm原文档明确强调本项目依赖 Node 与 PNPM如果机器上尚未安装需要先完成安装见 web_server/README.md。pnpm 是 Vite 官方推荐的包管理器相比 npm 具有更快的安装速度与更省磁盘空间的硬链接存储机制本项目也通过pnpm-lock.yaml锁定了依赖版本。安装 pnpm 的常用方式以 npm 全局安装为例npm install -g pnpm验证环境node -v pnpm -v注意README 中同时给出了中英文两版说明顶部有 English 与 中文 语言切换锚点两版内容一致本文按中文版为主线展开。三、安装依赖pnpm install进入前端工程目录后执行pnpm install该命令会根据package.json与pnpm-lock.yaml安装全部依赖。依赖主要分为两类运行时依赖dependenciesvue、element-plus、axios、vue-router、pinia、vue-i18n、microsoft/fetch-event-sourceSSE 流式请求、ricky0123/vad-web浏览器 VAD、clipboard、el-table-infinite-scroll等开发依赖devDependenciesvite、vitejs/plugin-vue、eslint、prettier、less、unplugin-auto-import、unplugin-vue-components等构建与工程化工具。其中unplugin-auto-import与unplugin-vue-components会在编译期自动按需导入 Element Plus 组件与 API这也是为什么源码中几乎看不到显式import { ElButton }这类语句却能直接使用组件——详见本文第七节工程化细节。四、本地开发pnpm run dev热更新pnpm run dev该命令实际执行的是package.json中的dev: vite启动 Vite 开发服务器。结合 vite.config.js 中的server配置有以下关键行为server: { https: { key: fs.readFileSync(path.resolve(__dirname, key.pem)), cert: fs.readFileSync(path.resolve(__dirname, cert.pem)), }, host: 0.0.0.0, port: 8088, proxy: { /api/v1: { target: http://127.0.0.1:32550, ws: true, changeOrigin: true }, /ws: { target: http://127.0.0.1:32550, ws: true, changeOrigin: true } } }HTTPS 强制启用开发服务器读取根目录下的key.pem与cert.pem证书文件。浏览器调用麦克风/摄像头需要安全上下文HTTPS 或 localhost因此该工程默认以 HTTPS 方式运行。如果启动时报证书文件缺失需要先按第六节方法生成自签名证书监听 0.0.0.0:8088允许局域网内其他设备访问热更新Hot-ReloadVite 基于 ESM 的模块热替换机制修改.vue、.js文件后页面即时刷新开发体验流畅。启动成功后浏览器访问https://localhost:8088即可看到 Web 界面自签名证书会提示不安全选择“继续访问”即可。五、生产构建pnpm run buildpnpm run build该命令执行build: vite build将源码编译、压缩并输出到dist/目录产物可直接交由静态服务器如 Nginx托管。构建完成后还可以用内置预览命令本地验证产物pnpm run preview此外package.json还提供了代码规范相关脚本lintESLint 自动修复与formatPrettier 格式化prepare会在安装依赖时自动触发 husky 的 git hook 安装属于团队协作场景下的常规工程化配置。六、对接自己的后端vite.config.js 的 proxy 配置重点这是原文档以红色字体特别强调的关键点如果你想在本地开发模式下运行项目并且调用自己的后端服务请修改项目根目录下的vite.config.js文件中的 proxy 配置。6.1 代理原理前端代码中所有请求都使用相对路径如POST /api/v1/stream本身不关心后端地址。Vite 开发服务器在收到匹配proxy规则的请求时会将其转发到target指定的目标地址。当前配置将两个前缀转发到http://127.0.0.1:32550/api/v1普通 HTTP APIws: true表示该前缀下的 WebSocket 升级请求同样被代理/wsWebSocket 流式通道。ws: true是关键——本项目对话过程的流式音频传输依赖 WebSocket见 src/utils/websocket.js 封装的自动重连客户端代理必须同时支持 WebSocket 升级否则语音通话会失败。6.2 修改目标地址如需指向自己的后端例如后端运行在192.168.1.10:9000只需修改两处targetproxy: { /api/v1: { target: http://192.168.1.10:9000, ws: true, changeOrigin: true }, /ws: { target: http://192.168.1.10:9000, ws: true, changeOrigin: true } }修改后重启pnpm run dev即可生效。6.3 后端实际提供的接口源码佐证代理的目标端口 32550 正是 model_server.py 中 FastAPI 服务的默认监听端口--port参数默认值32550。从该文件源码可见后端同时注册了带/api/v1前缀与不带前缀两套路由供不同部署方式使用方法路由用途POST/api/v1/stream流式对话请求SSE / 分块响应WebSocket/ws/api/v1/streamWebSocket 流式对话通道POST/api/v1/completions补全式请求POST/api/v1/stop停止当前生成POST/api/v1/feedback用户反馈POST/api/v1/init_options初始化/上传配置如音色选项GET/api/v1/health健康检查返回{status: OK}前端 src/apis/index.js 中的sendMessage、stopMessage、uploadFile、feedback、uploadConfig分别对应stream、stop、upload_audio、feedback、init_options这几个接口形成完整的前后端契约。排查联调问题时可用curl https://localhost:8088/api/v1/health验证代理链路是否打通。6.4 HTTP 请求层细节src/hooks/useHttp.js 展示了请求层的几个约定排查问题时有参考价值默认超时 30 秒但包含stream的请求会被降为 3 秒超时流式接口首包必须快速返回每个请求自动携带uid请求头来自 localStorage见 src/hooks/useRandomId.js后端据此区分会话响应统一包装为{ code, message, data }结构。七、生产环境部署Dockerfile 与 nginx.conf原文档只覆盖本地开发与构建仓库中额外提供了生产部署方案这里一并补充。7.1 多阶段构建 DockerfileDockerfile 采用典型的多阶段构建build-stage基于 Node 镜像设置 npm/pnpm 镜像源https://registry.npmmirror.com/加速安装执行pnpm install与pnpm run build产出dist/静态资源production-stage基于 alpine 镜像将dist/拷贝到 Nginx 的/usr/share/nginx/html并覆盖nginx.conf对外暴露3000端口。7.2 Nginx 反向代理 nginx.confnginx 配置在生产环境复刻了开发期的代理语义值得关注的细节location /api/v1反向代理到http://127.0.0.1:32550并通过proxy_buffering off、X-Accel-Buffering off、chunked_transfer_encoding off等配置关闭代理缓冲保证流式响应逐段实时回传避免语音/文本卡顿location /ws配置标准的 WebSocket 升级头Upgrade、Connection: upgradelocation /try_files $uri $uri/ /index.html实现 Vue Router 的 history 模式 SPA 回退刷新页面不会 404client_max_body_size 20M允许上传较大的音频/配置请求体跨域头Access-Control-Allow-Origin *等也已预先配置。如果后端不在 127.0.0.1:32550部署时同步修改这两处proxy_pass即可。八、HTTPS 证书生成make_ssl_cert.sh由于 vite.config.js 强制启用 HTTPS首次运行pnpm run dev前必须先生成证书。仓库提供了现成脚本 make_ssl_cert.shopenssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes-x509直接生成自签名证书-newkey rsa:2048同时生成 2048 位 RSA 密钥-keyout key.pem -out cert.pem输出密钥与证书文件对应 vite 配置中的文件名-days 365有效期一年-nodes密钥不加密避免每次启动输入密码。在 web_server 目录下执行该脚本即可得到开发所需的两个证书文件。九、前端工程化细节速览源码补充自动导入vite.config.js 中AutoImportComponents插件配合ElementPlusResolver、IconsResolver让 Element Plus 组件、图标Icon前缀与 Vue 组合式 API 无需手动 importless预处理器通过additionalData全局注入主题变量路径别名指向src目录resolve.alias配置源码中import ... from /router即基于此中英双语src/main.js 基于 vue-i18n 加载 src/i18n/en.json 与 src/i18n/zh.json语言偏好持久化在localStorage.languageWebSocket 自动重连src/utils/websocket.js 最多重连 5 次、间隔 5 秒并在连接关闭非主动关闭码 1005时自动恢复保证长时间语音会话的稳定性。十、常见问题排查以下结论均依据上文引用的配置与源码推断供联调时定位问题现象可能原因与处理pnpm run dev启动报证书错误key.pem/cert.pem缺失先在 web_server 目录执行 make_ssl_cert.sh 生成证书页面能打开但无回复检查http://127.0.0.1:32550/api/v1/health是否可达后端未启动时需先运行 model_server.py默认端口 32550已部署自己的后端但不生效确认 vite.config.js 中/api/v1与/ws两处target均已修改且保留了ws: true语音/文字流式输出卡顿检查代理链路是否关闭了缓冲Nginx 部署对应proxy_buffering off见 nginx.conf接口返回超时stream接口首包需在 3 秒内返回见 src/hooks/useHttp.js需确认后端推理链路正常十一、总结MiniCPM-o 2.6 的 Web 前端工程基于 Vue 3 Vite pnpm 构建搭建路径非常清晰pnpm install装依赖 →pnpm run dev开发调试 →pnpm run build产出静态资源生产环境可用仓库自带的 Dockerfile nginx.conf 一键容器化部署。所有前后端联调的钥匙都集中在vite.config.js的 proxy 配置上——只要把/api/v1与/ws两个前缀指向你的后端地址前端即可与 MiniCPM-o 2.6 模型服务完成 HTTP 与 WebSocket 的双通道对接。结合本文对 model_server.py 接口、src/apis/index.js 请求层与 Nginx 代理配置的源码级解读你已具备从零搭建、联调与部署整套 Web 演示环境的完整能力。【免费下载链接】MiniCPM-VA Pocket-Sized MLLM for Ultra-Efficient Image and Video Understanding on Your Phone项目地址: https://gitcode.com/GitHub_Trending/mi/MiniCPM-V创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 MiniCPM-o 2.6 Web 前端工程搭建指南：基于 Vue 3 + Vite + pnpm 的本地开发、生产构建与后端代理配置
MiniCPM-o 2.6 Web 前端工程搭建指南基于 Vue 3 Vite pnpm 的本地开发、生产构建与后端代理配置【免费下载链接】MiniCPM-VA Pocket-Sized MLLM for Ultra-Efficient Image and Video Understanding on Your Phone项目地址: https://gitcode.com/GitHub_Trending/mi/MiniCPM-V本篇技术指南以仓库内 web_server/README.md 为骨架系统讲解 MiniCPM-o 2.6 Web 演示前端工程的完整搭建流程环境准备、依赖安装、热更新开发、生产构建以及如何通过vite.config.js的 proxy 配置对接自建后端服务。读完本文你将能够独立在本机跑起这套基于 Vue 3 与 Vite 的语音视频对话前端并将其与 model_server.py 提供的 FastAPI 服务默认端口 32550无缝打通。一、项目定位一套完整的语音视频对话 Web 前端该前端位于 web_demos/minicpm-o_2.6/web_server是 MiniCPM-o 2.6 全模态音频、视频、语音交互能力的浏览器端实现。从 package.json 可以看到其技术栈Vue 3.4 Vite 5.3 Element Plus 2.8 组件库 Pinia 状态管理 vue-router 路由 vue-i18n 国际化中英双语并通过ricky0123/vad-web在浏览器端做语音活动检测VAD。从源码结构看前端目录划分清晰各司其职src/apis/index.js封装与后端交互的 HTTP APIsrc/utils/websocket.js封装带自动重连的 WebSocket 客户端用于流式传输src/hooksHTTP 请求、语音、队列等可复用逻辑src/views/home聊天、语音通话、视频通话等核心界面public/silero_vad_legacy.onnx浏览器端 VAD 所需的 ONNX 模型文件。前后端是分离部署的前端负责交互与渲染后端 model_server.py 负责加载openbmb/MiniCPM-o-2_6模型并提供流式推理接口。因此“前端如何找到后端”是搭建过程中的关键环节本文第三节将重点展开。二、环境准备Node 与 pnpm原文档明确强调本项目依赖 Node 与 PNPM如果机器上尚未安装需要先完成安装见 web_server/README.md。pnpm 是 Vite 官方推荐的包管理器相比 npm 具有更快的安装速度与更省磁盘空间的硬链接存储机制本项目也通过pnpm-lock.yaml锁定了依赖版本。安装 pnpm 的常用方式以 npm 全局安装为例npm install -g pnpm验证环境node -v pnpm -v注意README 中同时给出了中英文两版说明顶部有 English 与 中文 语言切换锚点两版内容一致本文按中文版为主线展开。三、安装依赖pnpm install进入前端工程目录后执行pnpm install该命令会根据package.json与pnpm-lock.yaml安装全部依赖。依赖主要分为两类运行时依赖dependenciesvue、element-plus、axios、vue-router、pinia、vue-i18n、microsoft/fetch-event-sourceSSE 流式请求、ricky0123/vad-web浏览器 VAD、clipboard、el-table-infinite-scroll等开发依赖devDependenciesvite、vitejs/plugin-vue、eslint、prettier、less、unplugin-auto-import、unplugin-vue-components等构建与工程化工具。其中unplugin-auto-import与unplugin-vue-components会在编译期自动按需导入 Element Plus 组件与 API这也是为什么源码中几乎看不到显式import { ElButton }这类语句却能直接使用组件——详见本文第七节工程化细节。四、本地开发pnpm run dev热更新pnpm run dev该命令实际执行的是package.json中的dev: vite启动 Vite 开发服务器。结合 vite.config.js 中的server配置有以下关键行为server: { https: { key: fs.readFileSync(path.resolve(__dirname, key.pem)), cert: fs.readFileSync(path.resolve(__dirname, cert.pem)), }, host: 0.0.0.0, port: 8088, proxy: { /api/v1: { target: http://127.0.0.1:32550, ws: true, changeOrigin: true }, /ws: { target: http://127.0.0.1:32550, ws: true, changeOrigin: true } } }HTTPS 强制启用开发服务器读取根目录下的key.pem与cert.pem证书文件。浏览器调用麦克风/摄像头需要安全上下文HTTPS 或 localhost因此该工程默认以 HTTPS 方式运行。如果启动时报证书文件缺失需要先按第六节方法生成自签名证书监听 0.0.0.0:8088允许局域网内其他设备访问热更新Hot-ReloadVite 基于 ESM 的模块热替换机制修改.vue、.js文件后页面即时刷新开发体验流畅。启动成功后浏览器访问https://localhost:8088即可看到 Web 界面自签名证书会提示不安全选择“继续访问”即可。五、生产构建pnpm run buildpnpm run build该命令执行build: vite build将源码编译、压缩并输出到dist/目录产物可直接交由静态服务器如 Nginx托管。构建完成后还可以用内置预览命令本地验证产物pnpm run preview此外package.json还提供了代码规范相关脚本lintESLint 自动修复与formatPrettier 格式化prepare会在安装依赖时自动触发 husky 的 git hook 安装属于团队协作场景下的常规工程化配置。六、对接自己的后端vite.config.js 的 proxy 配置重点这是原文档以红色字体特别强调的关键点如果你想在本地开发模式下运行项目并且调用自己的后端服务请修改项目根目录下的vite.config.js文件中的 proxy 配置。6.1 代理原理前端代码中所有请求都使用相对路径如POST /api/v1/stream本身不关心后端地址。Vite 开发服务器在收到匹配proxy规则的请求时会将其转发到target指定的目标地址。当前配置将两个前缀转发到http://127.0.0.1:32550/api/v1普通 HTTP APIws: true表示该前缀下的 WebSocket 升级请求同样被代理/wsWebSocket 流式通道。ws: true是关键——本项目对话过程的流式音频传输依赖 WebSocket见 src/utils/websocket.js 封装的自动重连客户端代理必须同时支持 WebSocket 升级否则语音通话会失败。6.2 修改目标地址如需指向自己的后端例如后端运行在192.168.1.10:9000只需修改两处targetproxy: { /api/v1: { target: http://192.168.1.10:9000, ws: true, changeOrigin: true }, /ws: { target: http://192.168.1.10:9000, ws: true, changeOrigin: true } }修改后重启pnpm run dev即可生效。6.3 后端实际提供的接口源码佐证代理的目标端口 32550 正是 model_server.py 中 FastAPI 服务的默认监听端口--port参数默认值32550。从该文件源码可见后端同时注册了带/api/v1前缀与不带前缀两套路由供不同部署方式使用方法路由用途POST/api/v1/stream流式对话请求SSE / 分块响应WebSocket/ws/api/v1/streamWebSocket 流式对话通道POST/api/v1/completions补全式请求POST/api/v1/stop停止当前生成POST/api/v1/feedback用户反馈POST/api/v1/init_options初始化/上传配置如音色选项GET/api/v1/health健康检查返回{status: OK}前端 src/apis/index.js 中的sendMessage、stopMessage、uploadFile、feedback、uploadConfig分别对应stream、stop、upload_audio、feedback、init_options这几个接口形成完整的前后端契约。排查联调问题时可用curl https://localhost:8088/api/v1/health验证代理链路是否打通。6.4 HTTP 请求层细节src/hooks/useHttp.js 展示了请求层的几个约定排查问题时有参考价值默认超时 30 秒但包含stream的请求会被降为 3 秒超时流式接口首包必须快速返回每个请求自动携带uid请求头来自 localStorage见 src/hooks/useRandomId.js后端据此区分会话响应统一包装为{ code, message, data }结构。七、生产环境部署Dockerfile 与 nginx.conf原文档只覆盖本地开发与构建仓库中额外提供了生产部署方案这里一并补充。7.1 多阶段构建 DockerfileDockerfile 采用典型的多阶段构建build-stage基于 Node 镜像设置 npm/pnpm 镜像源https://registry.npmmirror.com/加速安装执行pnpm install与pnpm run build产出dist/静态资源production-stage基于 alpine 镜像将dist/拷贝到 Nginx 的/usr/share/nginx/html并覆盖nginx.conf对外暴露3000端口。7.2 Nginx 反向代理 nginx.confnginx 配置在生产环境复刻了开发期的代理语义值得关注的细节location /api/v1反向代理到http://127.0.0.1:32550并通过proxy_buffering off、X-Accel-Buffering off、chunked_transfer_encoding off等配置关闭代理缓冲保证流式响应逐段实时回传避免语音/文本卡顿location /ws配置标准的 WebSocket 升级头Upgrade、Connection: upgradelocation /try_files $uri $uri/ /index.html实现 Vue Router 的 history 模式 SPA 回退刷新页面不会 404client_max_body_size 20M允许上传较大的音频/配置请求体跨域头Access-Control-Allow-Origin *等也已预先配置。如果后端不在 127.0.0.1:32550部署时同步修改这两处proxy_pass即可。八、HTTPS 证书生成make_ssl_cert.sh由于 vite.config.js 强制启用 HTTPS首次运行pnpm run dev前必须先生成证书。仓库提供了现成脚本 make_ssl_cert.shopenssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365 -nodes-x509直接生成自签名证书-newkey rsa:2048同时生成 2048 位 RSA 密钥-keyout key.pem -out cert.pem输出密钥与证书文件对应 vite 配置中的文件名-days 365有效期一年-nodes密钥不加密避免每次启动输入密码。在 web_server 目录下执行该脚本即可得到开发所需的两个证书文件。九、前端工程化细节速览源码补充自动导入vite.config.js 中AutoImportComponents插件配合ElementPlusResolver、IconsResolver让 Element Plus 组件、图标Icon前缀与 Vue 组合式 API 无需手动 importless预处理器通过additionalData全局注入主题变量路径别名指向src目录resolve.alias配置源码中import ... from /router即基于此中英双语src/main.js 基于 vue-i18n 加载 src/i18n/en.json 与 src/i18n/zh.json语言偏好持久化在localStorage.languageWebSocket 自动重连src/utils/websocket.js 最多重连 5 次、间隔 5 秒并在连接关闭非主动关闭码 1005时自动恢复保证长时间语音会话的稳定性。十、常见问题排查以下结论均依据上文引用的配置与源码推断供联调时定位问题现象可能原因与处理pnpm run dev启动报证书错误key.pem/cert.pem缺失先在 web_server 目录执行 make_ssl_cert.sh 生成证书页面能打开但无回复检查http://127.0.0.1:32550/api/v1/health是否可达后端未启动时需先运行 model_server.py默认端口 32550已部署自己的后端但不生效确认 vite.config.js 中/api/v1与/ws两处target均已修改且保留了ws: true语音/文字流式输出卡顿检查代理链路是否关闭了缓冲Nginx 部署对应proxy_buffering off见 nginx.conf接口返回超时stream接口首包需在 3 秒内返回见 src/hooks/useHttp.js需确认后端推理链路正常十一、总结MiniCPM-o 2.6 的 Web 前端工程基于 Vue 3 Vite pnpm 构建搭建路径非常清晰pnpm install装依赖 →pnpm run dev开发调试 →pnpm run build产出静态资源生产环境可用仓库自带的 Dockerfile nginx.conf 一键容器化部署。所有前后端联调的钥匙都集中在vite.config.js的 proxy 配置上——只要把/api/v1与/ws两个前缀指向你的后端地址前端即可与 MiniCPM-o 2.6 模型服务完成 HTTP 与 WebSocket 的双通道对接。结合本文对 model_server.py 接口、src/apis/index.js 请求层与 Nginx 代理配置的源码级解读你已具备从零搭建、联调与部署整套 Web 演示环境的完整能力。【免费下载链接】MiniCPM-VA Pocket-Sized MLLM for Ultra-Efficient Image and Video Understanding on Your Phone项目地址: https://gitcode.com/GitHub_Trending/mi/MiniCPM-V创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考