vue3-webseek網頁版AI問答|Vite6+DeepSeek+Arco流式ai聊天打字效果

2025 AI實戰vue3+deepseek+arcoDesign仿DeepSeek/豆包網頁版AI聊天助手。

vue3-web-deepseek 實戰網頁PC版智能AI對話，基于vite6+vue3.5+openAI對接DeepSeek-Chat聊天對話模型。實現流動式打字返回效果、支持亮色+暗黑主題、各種代碼高亮、本地會話存儲等功能。

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式ai聊天系統

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Electron35-DeepSeek桌面端AI系統|vue3.5+electron+arco客戶端ai模板

Vue3-DeepSeek-Chat流式AI對話|vite6+vant4+deepseek智能ai聊天助手

??技術棧

編碼工具：Vscode
技術框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0
AI模型框架：DeepSeek-R1 + OpenAI
組件庫：arco-design^2.57.0 (字節桌面端組件庫)
狀態管理：pinia^3.0.1
本地存儲：pinia-plugin-persistedstate^4.2.0
高亮插件：highlight.js^11.11.1
markdown解析：markdown-it

??項目特點

流式響應Vue3+DeepSeek實現逐行打字輸出效果
基于Vite6構建，接入DeepSeek，性能更優，聊天絲滑流暢
支持各種代碼高亮，利于展示和分享代碼片段
采用arco-design組件庫，風格統一，美觀大氣
支持暗黑+亮色主題模式、側邊欄收縮

??項目框架結構

vue3-deepseek-webai使用 vite6 搭建項目模板，采用 vue3 setup 語法糖開發。

目前vue3-web-deepseek網頁版AI對話項目已經發布到我的原創作品集。

Vue3+DeepSeek+ArcoDesign網頁版AI流式對話模板

.env文件配置

# title
VITE_APP_TITLE = 'Vue3-Web-DeepSeek'

# port
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

公共布局模板

整個項目分為側邊欄+頂部導航條+AI對話內容區三個板塊。

<script setup>
  import Sidebar from '@/layouts/components/sidebar/index.vue'
</script>

<template>
  <div class="vu__container">
    <div class="vu__layout flexbox flex-col">
      <div class="vu__layout-body flex1 flexbox">
        <!-- 側邊欄 -->
        <Sidebar />

        <!-- 主面板 -->
        <div class="vu__layout-main flex1">
          <router-view v-slot="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="route.path" />
            </keep-alive>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

側邊欄模板

<template>
  <div class="vu__sidebar" :class="{'collapsed': appstate.config.collapsed}">
    <a-button class="vu__sidebar-collapse" shape="circle" @click="handleCollapse"></a-button>
    <aside class="vu__sidebar-aside flex1 flexbox flex-col">
      <div class="vu__aside-head">
        <router-link to="/" class="logo"><i class="iconfont ai-deepseek"></i><span class="fs-14 ff-ab">Vue3-WebSeek</span></router-link>
        <div class="btn-create flex-c mt-15" @click="handleCreate"><i class="iconfont ai-newchat fs-20"></i>新建對話</div>
      </div>
      <div class="vu__aside-navlinks flexbox flex-col">
        <div class="section-navitem" @click="toLink('/aihub')">
          <span class="icon flex-c"><icon-compass size="18" /></span>
          <div class="title">AI 導航</div>
        </div>
        <a-dropdown trigger="hover" :show-arrow="false" position="rt" :popup-offset="15" :content-style="{'min-width': '150px'}">
          <div class="section-navitem">
            <span class="icon flex-c"><icon-command size="18" /></span>
            <div class="title">AI 技能</div>
            <i class="iconfont ai-arrR c-999 fs-12"></i>
          </div>
          <template #content>
            <a-doption><i class="iconfont ai-aisousou"></i> AI搜索</a-doption>
            <a-doption><i class="iconfont ai-fanyi"></i> 快速翻譯</a-doption>
            <a-doption><i class="iconfont ai-xiezuo"></i> 幫我寫作</a-doption>
            <a-doption><i class="iconfont ai-tuxiang"></i> 圖像生成</a-doption>
            <a-doption><i class="iconfont ai-aicode"></i> AI編程</a-doption>
          </template>
        </a-dropdown>
      </div>
      <a-divider style="margin: 0;" />
      <div class="vu__aside-sessions flex1 flexbox flex-col">
        <div class="vu__aside-navlinks">
          <div class="section-navitem plain">
            <span class="icon flex-c"><icon-message size="18" /></span>
            <div class="title">最近對話</div>
            <i class="clean iconfont ai-qingli" @click="handleClean"></i>
          </div>
        </div>
        <a-scrollbar :outer-style="{'height': '100%'}">
          <template v-if="sessionstate.session.length">
            <SessionList />
          </template>
          <template v-else>
            <a-empty description="暫無對話" />
          </template>
        </a-scrollbar>
      </div>
      <div class="vu__aside-navlinks" @click="toLink('/setting')">
        ...
      </div>
    </aside>
  </div>
</template>

AI對話編輯框

封裝在components目錄下ChatEditor.vue組件。

<template>
  <div class="v3ai__footbar flexbox flex-col">
    <!-- 技能欄 -->
    <div v-if="skillbar" class="v3ai__skills flexbox flex-alignc">
      ...
    </div>
    <!-- 編輯欄 -->
    <div class="v3ai__inputbox flexbox flex-col">
      <div class="v3ai__editor flexbox">
        <a-textarea v-model="editorText" :auto-size="autoSize" placeholder="有問題，盡管問" @input="handleInput" />
      </div>
      <!-- 操作欄 -->
      <div class="v3ai__tools flexbox flex-alignc">
        <div class="option flex1 flexbox">
          <div class="btn" :class="{'active': isDeep}" @click="isDeep =! isDeep"><i class="iconfont ai-deepthink"></i> 深度思考 (R1)</div>
          <div class="btn" :class="{'active': isNetwork}" @click="isNetwork =! isNetwork"><i class="iconfont ai-network"></i> 聯網</div>
        </div>
        <a-dropdown trigger="hover" :show-arrow="false" position="lb" :content-style="{'min-width': '250px'}">
          <a-button shape="circle"><icon-attachment size="18" /></a-button>
          <template #content>
            ...
          </template>
        </a-dropdown>
        <a-tooltip content="添加圖片" position="top" mini>
          <a-button shape="circle"><icon-image size="18" /></a-button>
        </a-tooltip>
        <a-dropdown :show-arrow="false" position="top" :popup-translate="[-10, -5]">
          <a-button shape="circle" style="background: none;"><icon-plus size="18" /></a-button>
          <template #content>
            <a-doption value="pyq"><icon-apps /> 文件</a-doption>
            <a-doption value="qq"><icon-apps /> PDF文檔分析</a-doption>
            <a-doption value="qq"><icon-apps /> Word文檔分析</a-doption>
            <a-doption value="qq"><icon-apps /> 網頁總結</a-doption>
          </template>
        </a-dropdown>
        <a-divider direction="vertical" style="margin: 0 8px 0 5px;" />
        <a-button type="primary" shape="circle" :disabled="!editorText?.trim() || sessionstate.loading" @click="handleSubmit">
          <icon-arrow-up v-if="!sessionstate.loading" size="20" />
          <icon-loading v-else size="18" />
        </a-button>
      </div>
    </div>
  </div>
</template>

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.6, // 嚴謹采樣 越低越嚴謹(默認1)
})

// 返回ai內容
console.log(completion.choices[0].message.content)

處理流式打字返回。通過for循環疊加流式返回片段。

// 處理流式輸出
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.5接入deepseek搭建網頁版AI聊天助手的一些知識分享，希望對大家有些幫助~

附上幾個最新項目實例

flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

Electron35-DeepSeek桌面端AI系統|vue3.5+electron+arco客戶端ai模板

Vue3-DeepSeek-Chat流式AI對話|vite6+vant4+deepseek智能ai聊天助手

flutter3-dymall仿抖音直播商城|Flutter3.27短視頻+直播+聊天App實例

uniapp+vue3酒店預訂|vite5+uniapp預約訂房系統模板(h5+小程序+App端)

Tauri2.0-Vue3OS桌面端os平臺|tauri2+vite6+arco電腦版OS管理系統

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天應用

Electron31-Vue3Admin管理系統|vite5+electron+pinia桌面端后臺Exe

flutter3-trip仿攜程酒店預訂|Flutter3.27+Getx預約旅游酒店App程序

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天語音/朋友圈

posted @ 2025-03-27 13:09 xiaoyan2017 閱讀(3638) 評論(0) 收藏舉報

刷新頁面返回頂部

web前端項目案例實戰

交流分享前端(移動端|微信端|小程序)最新技術、知識、項目案例...

vue3-webseek網頁版AI問答|Vite6+DeepSeek+Arco流式ai聊天打字效果

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式ai聊天系統

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Electron35-DeepSeek桌面端AI系統|vue3.5+electron+arco客戶端ai模板

Vue3-DeepSeek-Chat流式AI對話|vite6+vant4+deepseek智能ai聊天助手

??技術棧

??項目特點

??項目框架結構

目前vue3-web-deepseek網頁版AI對話項目已經發布到我的原創作品集。

.env文件配置

公共布局模板

AI對話編輯框

Vue3集成DeepSeek API

公告

web前端項目案例實戰

交流分享前端(移動端|微信端|小程序)最新技術、知識、項目案例...

vue3-webseek網頁版AI問答|Vite6+DeepSeek+Arco流式ai聊天打字效果

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式ai聊天系統

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Electron35-DeepSeek桌面端AI系統|vue3.5+electron+arco客戶端ai模板

Vue3-DeepSeek-Chat流式AI對話|vite6+vant4+deepseek智能ai聊天助手

??技術棧

??項目特點

??項目框架結構

目前vue3-web-deepseek網頁版AI對話項目已經發布到我的原創作品集。

.env文件配置

公共布局模板

AI對話編輯框

Vue3集成DeepSeek API

公告

交流分享前端(移動端|微信端|小程序)最新技術、知識、項目案例...