最新版vite8.3+vue3+deepseek-v4.1-flash网页版webai模板

花了一周时间爆肝基于 Vite 8.3 + Vue 3.5 + Arco Design 构建的网页版 DeepSeek AI会话模板。

项目知识点

前端技术框架：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

项目结构框架

vite8-webai网页版ai对话系统已经更新到我的原创作品集。

Vite8+DeepSeek+Vue3.5搭建Web版AI智能问答助理

运行配置

申请一个deepseek apikey，替换掉项目根目录下**.env**文件里的key，即可愉快体验ai流式对话功能。

复制代码

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

vite8+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,
})

OK，以上就是vite8+vue3集成最新deepseek-flash大模型，零到一实战网页版ai对话系统的一些项目分享。