2025最新DeepSeek+Vue3流式聊天助手，完结篇！

2025大模型新作，基于vue3.5+deepseek api+markdown+vant4搭建DeepSeek AI流式输出对话系统Vue3DeepChat。vue3-deepseek-chat集成了Vue3对接DeepSeek API对话模型。支持代码高亮、本地缓存，支持移动端+PC端完美显示。使用技术编辑器：vscode技术框架：vite^6.2.0+vue^3.5.13+vue-route

发菜君

2560人浏览 · 2025-03-23 16:08:42

发菜君 · 2025-03-23 16:08:42 发布

2025大模型新作，基于vue3.5+deepseek api+markdown+vant4搭建DeepSeek AI流式输出对话系统Vue3DeepChat。

vue3-deepseek-chat集成了Vue3对接DeepSeek API对话模型。支持代码高亮、本地缓存，支持移动端+PC端完美显示。

使用技术

编辑器：vscode
技术框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0
大模型框架：DeepSeek-R1 / OpenAI
UI组件库：vant^4.9.17 (有赞vue3移动端组件库)
状态管理：pinia^3.0.1
高亮插件：highlight.js^11.11.1
markdown解析：markdown-it
本地缓存：pinia-plugin-persistedstate^4.2.0

项目结构框架

目前该项目已经同步到我的原创作品小铺，感兴趣的可以去看看。

项目特性

基于Vite6构建，集成DeepSeek，性能更优，对话丝滑流畅
支持各种代码高亮，方便展示和分享代码片段
使用vant4组件库，风格统一，时尚大气
支持移动端+PC端750px像素适配，大屏也有良好体验
流式响应：逐字显示 AI 回复，提供更好的用户体验

配置.env文件

去deepseek申请一个apikey，替换掉.env文件里VITE_DEEPSEEK_API_KEY即可快速体验聊天对话功能。

# titleVITE_APP_TITLE = 'Vue3-DeepSeek-Chat'
# port 默认http://localhost:5173/VITE_PORT = 3001
# 运行时自动打开浏览器VITE_OPEN = true
# 开启httpsVITE_HTTPS = false
# 是否删除生产环境 consoleVITE_DROP_CONSOLE = true
# DeepSeek API配置VITE_DEEPSEEK_API_KEY = 替换为你的 API KeyVITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

main.js配置

import { createApp } from 'vue'import './style.scss'import App from './App.vue'
// 引入路由/状态管理import Router from './router'import Pinia from './pinia'
import Plugins from './plugins'
const app = createApp(App)
app.use(Router).use(Pinia).use(Plugins).mount('#app')

布局模板

项目整体分为顶部导航栏+聊天对话区+底部编辑器三个模块。

<template>  <div class="flexbox flex-col" style="height:100%;">    <Toolbar :title="chatSession?.title" />
    <div class="v3ai__scrollview flex1">      <!-- Chat对话 -->      <div v-if="chatSession && !isEmpty(chatSession.data)" class="v3ai__chatbot" ref="scrollRef" @scroll="onScroll">        <div class="v3ai__chatbot-sessions">          ...        </div>        <!-- 滚动底部 -->        <div class="v3ai__scrollbottom flex-c" :class="{'is-bottom': reachBottom}" @click="scrollToBottom"><i class="iconfont ai-arrD"></i></div>      </div>      <!-- 导语 -->      <div v-else class="v3ai__chatbot-intro">        <i class="logo iconfont ai-deepseek"></i>        <h3 class="name"><span class="txt text-gradient">嗨~ Vue3-DeepSeek</span></h3>        <p class="desc">你身边的智能小帮手，我可以帮你搜索、答疑、写作，请把你的任务交给我吧~</p>        <div class="prompt">          <p class="tip flex-c"><span class="flex1">你可以这样问</span><span class="flex-c" @click="refreshPrompt">换一换<i class="iconfont ai-shuaxin"></i></span></p>          <ul class="list">            <li v-for="(item,index) in promptList" :key="index">              <div class="txt" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}}</div>            </li>          </ul>        </div>      </div>    </div>
    <!-- 编辑器 -->    <ChatEditor ref="editorRef" :value="promptValue" :reachBottom="reachBottom" :scrollBottom="scrollToBottom" />  </div></template>

状态管理

/** * 状态管理 Pinia * @author andy */
import { createPinia } from 'pinia'// 引入pinia本地持久化存储import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()pinia.use(piniaPluginPersistedstate)
export default pinia

vue3对接deepseek聊天会话存储本地。

export const chatStore = defineStore('chat', {  state: () => ({    // 聊天会话记录    sessionId: '',    session: []  }),  getters: {},  actions: {    // 创建新对话    createSession(ssid) {      this.sessionId = ssid      this.session.unshift({        sessionId: ssid,        title: '',        data: []      })    },
    // 新增会话    addSession(message) {      // 判断当前会话uuid是否存在，不存在创建新对话      if(!this.sessionId) {        const ssid = guid()        this.createSession(ssid)      }      this.session.map(item => {        if(item.sessionId == this.sessionId) {          if(!item.title) {            item.title = message.content          }          item.data.push(message)        }      })    },
    // 更新某一条会话    updateSession(key, content) {      this.session.map(item => {        if(item.sessionId == this.sessionId) {          if(item.data && !isEmpty(item.data)) {            item.data.map((it, index) => {              if(it.key == key) {                it.content = content              }            })          }        }      })    },
    // 获取会话    getSession() {      return this.session.find(item => item.sessionId == this.sessionId)    },
    // 移除会话    removeSession(ssid) {      const index = this.session.findIndex(item => item?.sessionId === ssid)      if(index > -1) {        this.session.splice(index, 1)      }      this.sessionId = ''    },    // 删除某一条会话    deleteSession(key) {      this.session.map(item => {        if(item.sessionId == this.sessionId) {          if(item.data && !isEmpty(item.data)) {            item.data.map((it, index) => {              if(it.key == key) {                item.data.splice(index, 1)              }            })          }        }      })    },
    // 清空会话    clearSession() {      this.session = []      this.sessionId = ''    }  },  // 本地持久化存储(默认存储localStorage)  persist: true  /* persist: {    // key: 'chatStore', // 不设置则是默认app    storage: localStorage,    paths: ['ssid', 'sessions'] // 设置缓存键  } */})

vue3对接deepseek api

const completion = await openai.chat.completions.create({  messages: [    {role: 'user', content: editorValue}  ],  model: 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型  stream: false, // 流式输出  max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)  temperature: 0.4, // 严谨采样 越低越严谨(默认1)})// 处理返回数据console.log(completion.choices[0].message.content)

处理流式输出返回结果。

// 处理流式输出let content = ''for await (const chunk of completion) {  content += chunk.choices[0].delta.content;  chatState.updateSession(uniKey, content)  if(chunk.choices[0].finish_reason == 'stop') {    loading.value = false  }  if(props.reachBottom) {    props.scrollBottom()  }}

综上就是vue3集成deepseek打造一个ai对话小助手的一些知识分享，感谢大家的阅读与支持！

如何学习AI大模型？

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。