快到离谱！Vite8.3 + Vue3 接入 DeepSeek-V4.1-Flash，网页 AI 秒回

原创

xiaoyan2018

发布于 2026-10-12 11:42:46

940

文章被收录于专栏：前端进阶实战前端进阶实战

2026 最丝滑：Vite8.3 跑 DeepSeek-V4.1-Flash 搭建网页web版流式输出AI对话模板，打字机效果太上头！

Vue3 + Vite8 集成 DeepSeek-V4.1-Flash（SSE 流式 / Markdown / 代码高亮）

技术框架：vite^8.3.0+vue^3.5.42+vue-router^5.3.1
大模型：DeepSeek-V4.1 + OpenAI
组件库：arco-design^2.58.0 (字节桌面端组件库)
状态管理：pinia^4.0.3
本地存储：pinia-plugin-persistedstate^4.7.1
高亮插件：highlight.js^11.12.0
markdown插件：markdown-it
katex公式：@mdit/plugin-katex^1.1.1

项目目录结构

快速开始

申请一个deepseek apikey，替换掉项目根目录下.env文件里的key。

# 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

项目布局模板

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

vue3接入最新deepseek-v4.1-flash大模型

const completion = await openai.chat.completions.create({
  messages: props.multiConversation ? historySession.value : [{role: 'user', content: editorValue}],
  // 对话模型
  model: 'deepseek-flash',
  // 是否深度思考
  thinking: {'type': chatState.thinkingEnabled ? 'enabled' : 'disabled'},
  // 流式输出
  stream: true,
})