Vue 3 + Vite 前端结合 Element Plus 与 OpenRouter 流式对话构建全栈 AI 创作界面

方案简介

Vue 3 + Vite 前端结合 Element Plus 与 OpenRouter 流式对话构建全栈 AI 创作界面。Vue 3 + Vite + TS 提供现代化前端框架；Pinia 做状态管理；Element Plus 提供 UI 组件；vue-i18n 做多语言；前端通过 OpenRouter 的 SSE 接口实现流式对话。

组成与分工

前端工程关键组成成员及其分工：

• Vue 3：核心视图层框架，负责组件化页面渲染。
• Vite：构建与开发服务器，提供快速的开发体验与生产构建。
• TypeScript：在 JavaScript 基础上增加静态类型，提升可维护性。
• Pinia：官方推荐的状态管理库，承载全局状态（如用户鉴权信息、会话等）。
• Vue Router：负责 SPA 路由与页面切换。
• Element Plus：基于 Vue 3 的 UI 组件库，提供表单、表格、弹窗等后台常见组件。
• vue-i18n：多语言支持，提供简体中文、English、日本語等多语言切换。
• highlight.js：代码与富文本高亮。
• lottie-web：用于播放 Lottie 动画。
• @google/model-viewer：用于展示 3D 模型。

实施步骤

1. 进入前端工程目录

前端工程位于仓库根目录的 vue/ 目录下。

2. 安装依赖

使用 pnpm 或 npm 安装依赖（Node.js 18+）。

3. 配置后端代理

按需修改前端项目中的代理或环境变量，使其指向 http://localhost:9898/api（或对应部署的后端地址）。

4. 开发模式运行

通过 Vite 开发服务器启动本地开发环境。

5. 生产构建

通过 Vite 构建出静态文件，并使用 Nginx 等 Web 服务器托管，按需配置反向代理到后端 API。

完整说明可参考同仓库下的 ./vue/README.md 前端部署指南。

优缺点

• ✓ 前后端职责分离便于独立部署
• ✓ 组件生态丰富 UI 开箱即用
• ✕ 前端仍依赖后端 SSE 接口与 API
• ✕ 编译产物需 Nginx 等 Web 服务

出处

本方案挖掘自开源项目 dulaiduwang003/comfyui-openrouter-ai，方案内容与实施命令均来自其 README 原文。