基于vue3.5 deepseek vant4 markdown仿DeepSeek-R1流式输出ai聊天界面

Vite-DeepseekChat原创新作vue3.5+vant4仿deepseek流式打字ai对话。

2025年重磅ai大模型对话，基于Vue3+Vite6+OpenAI对接DeepSeek聊天小助手模板，支持流式打字返回效果、浅色/暗黑主题模式、代码高亮显示、针对移动端+PC端适配处理。

运用技术

• 编辑器：vscode
• 技术框架：vite6.2.0 + vue3.5.13 + vue-router4.5.0
• AI框架：DeepSeek-R1 + OpenAI
• 组件库：Vant^4.9.17 (有赞vue3移动端组件库)
• 状态管理：pinia^3.0.1
• 高亮插件：highlight.js^11.11.1
• markdown解析：markdown-it
• 本地缓存：pinia-plugin-persistedstate^4.2.0

vue3-deepseek支持暗黑+浅色两种模式主题。

项目结构目录

使用最新版vite6.x+vue3.5搭建项目模板，集成deepseek-chat模型，采用流式stream输出返回结果，全部采用vue3 setup语法编码开发。

目前vue3-deepseek-chat项目已经同步至我的原创作品铺，感兴趣的可以去瞅瞅~
Vue3+DeepSeek+Vant4智能聊天AI流式对话模板

deepseek-vue3chat同样支持在pc端显示，以750px像素宽度布局。

环境变量配置

只需要在deepseek官网申请apiKey，替换下.env文件里的VITE_DEEPSEEK_API_KEY即可体验deepseek-chat模型功能。

# title
VITE_APP_TITLE = 'Vue3-DeepSeek-Chat'
 
# port 默认http://localhost:5173/
VITE_PORT = 3001
 
# 运行时自动打开浏览器
VITE_OPEN = true
 
# 开启https
VITE_HTTPS = false
 
# 是否删除生产环境 console
VITE_DROP_CONSOLE = true
 
# DeepSeek API配置
# VITE_DEEPSEEK_API_KEY = 替换为你的 API Key
VITE_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本地会话存储

使用pinia进行状态管理，配合pinia-plugin-persistedstate插件本地存储会话数据。

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

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)复制

• 流式stream返回

// 处理流式输出
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助手的一些知识分享，希望对大家有所帮助！

往期热文

• uniapp-vue3-wechat：基于uniapp+vue3仿微信app聊天
  https://blog.csdn.net/yanxinyun1990/article/details/138317354

• 原创uniapp+vue3+pinia2跨三端(H5+App+小程序)酒店预订模板
  https://blog.csdn.net/yanxinyun1990/article/details/144321309

• 原创自研electron31+vite5+pinia2仿微信客户端Exe聊天实例
  https://blog.csdn.net/yanxinyun1990/article/details/140284304

• flutter3.27实战抖音app商城|flutter3.x+getX仿抖音直播+短视频+聊天
  https://blog.csdn.net/yanxinyun1990/article/details/145471476

• 自研Flutter3.27+getx仿携程app酒店预订模板
  https://blog.csdn.net/yanxinyun1990/article/details/145752821

• Electron31-ViteAdmin桌面端后台|electron31+element-plus客户端后台
  https://blog.csdn.net/yanxinyun1990/article/details/141310166

• 自研tauri2.0-vue3-os桌面端仿macos管理系统
  https://blog.csdn.net/yanxinyun1990/article/details/144626469