## Vite4-ChatGPT 基于`vue3.x`模仿chatgpt聊天模板 > 使用`Vite4.x+Vue3+Pinia2+VEPlus+Vue3-Markdown`等技术模拟ChatGPT聊天模板实例。支持暗黑+亮色模式、全屏+半屏展示、Markdown语法解析、侧边栏等功能。 ![005360截图20230505215731854.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fb816f845f74ba5bca29b0fd5830b92~tplv-k3u1fbpfcp-watermark.image?) ![006360截图20230505215859532.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4984a3e3abe54cdcb5f56f910fb18a16~tplv-k3u1fbpfcp-watermark.image?) vite-wegpt 基于vite4.x构建，采用vue3 setup语法糖编码开发。 ![p2.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4c0f2dbe8e4bffa8f088b1b1ccf53d~tplv-k3u1fbpfcp-watermark.image?) ## 实现技术 - 编辑器：cursor - 框架技术：vue3+vite4.x+pinia2 - 组件库：ve-plus (vue3自定义UI组件库) - 国际化方案：vue-i18n^9.2.2 - 代码高亮：highlight.js^11.7.0 - 本地存储：pinia-plugin-persistedstate^3.1.0 - markdown解析：vue3-markdown-it - 样式处理：sass^1.62.0 ![008360截图20230505220720408.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b3a1b68c6cc4ed7838d617da4739386~tplv-k3u1fbpfcp-watermark.image?) ![011360截图20230505221437945.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b759f273d7dc4ccbb9c32f3d8acf9d89~tplv-k3u1fbpfcp-watermark.image?) ## 项目结构目录 ![360截图20230505224920366.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c002c0e90204b6bbeda92632f57dfba~tplv-k3u1fbpfcp-watermark.image?) ![002360截图20230505215207982.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d050ab2224e04c30827c13dcbfd2460b~tplv-k3u1fbpfcp-watermark.image?) ![012360截图20230505221451329.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7410bd1eeb84ed3b3af406232099654~tplv-k3u1fbpfcp-watermark.image?) ![015360截图20230505221756512.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b8a75882a03494aabd3cb20813550f9~tplv-k3u1fbpfcp-watermark.image?) ![017360截图20230505222337688.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/791f1e68ab034d48b812c8a801d9980b~tplv-k3u1fbpfcp-watermark.image?) ![018360截图20230505222445669.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ea9cfd3daa94bebbe67748bbfda4630~tplv-k3u1fbpfcp-watermark.image?) ![019360截图20230505222534439.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f66a21df8a64090aa2b0dd6f2884d37~tplv-k3u1fbpfcp-watermark.image?) ![021360截图20230505223350747.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2156f0f262d4b42943e2d4d3f9b7ab4~tplv-k3u1fbpfcp-watermark.image?) ![023360截图20230505223533347.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59b6c424c1174e62a3ad3c9dbe568ea5~tplv-k3u1fbpfcp-watermark.image?) ## main.js主页面 ``` import { createApp } from 'vue' import App from './App.vue' // 引入Router和Store import Router from './router' import Store from './store' // 引入插件配置 import Plugins from './plugins' const app = createApp(App) app .use(Router) .use(Store) .use(Plugins) .mount('#app') ``` ## vite.config.js项目配置 ``` import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' import { parseEnv } from './src/utils/env' // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { const viteEnv = loadEnv(mode, process.cwd()) const env = parseEnv(viteEnv) return { plugins: [vue()], // base: '/', // mode: 'development', // development|production /*构建选项*/ build: { // minify: 'esbuild', // 打包方式 esbuild(打包快)|terser // chunkSizeWarningLimit: 2000, // 打包大小警告 // rollupOptions: { // output: { // chunkFileNames: 'assets/js/[name]-[hash].js', // entryFileNames: 'assets/js/[name]-[hash].js', // assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // } // } }, esbuild: { // 打包去除 console.log 和 debugger drop: env.VITE_DROP_CONSOLE ? ['console', 'debugger'] : [] }, /*开发服务器选项*/ server: { // 端口 port: env.VITE_PORT, // 是否浏览器自动打开 open: env.VITE_OPEN, // 开启https https: env.VITE_HTTPS, // 代理配置 proxy: { // ... } }, resolve: { // 设置别名 alias: { '@': resolve(__dirname, 'src'), '@assets': resolve(__dirname, 'src/assets'), '@components': resolve(__dirname, 'src/components'), '@views': resolve(__dirname, 'src/views'), // 解决vue-i18n警告提示：You are running the esm-bundler build of vue-i18n. 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' } } } }) ``` ## 布局模板项目主体分为顶部导航操作栏、侧边栏、内容栏三个模块。 ```

``` ## 聊天框 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad68b730f2b64580a4febe3b0de09c8f~tplv-k3u1fbpfcp-watermark.image?) ``` ``` chat.js聊天状态管理 ``` /** * 聊天状态管理 * @author YXY Q：282310962 */ import { defineStore } from 'pinia' import { guid, isEmpty } from '@/utils' export const chatStore = defineStore('chat', { state: () => ({ // 聊天会话记录 sessionId: '', session: [] }), getters: {}, actions: { // 创建新会话 createSession(ssid) { this.sessionId = ssid this.session.push({ 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) } }) // ... }, // 获取会话 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(ssid) { // ... }, // 清空会话 clearSession() { this.session = [] this.sessionId = '' } }, // 本地持久化存储(默认存储localStorage) persist: true /* persist: { // key: 'chatStore', // 不设置则是默认app storage: localStorage, paths: ['aa', 'bb'] // 设置缓存键 } */ }) ``` ![bb2f7f223560f54dbecad93c3b5b061e_1289798-20230507092001165-1614786497.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c25c84fe3d674131bc60228b2eb681d7~tplv-k3u1fbpfcp-watermark.image?) ``` ``` 行了，基于vue3+vite4+pinia开发vite-wegpt就分享到这里，希望对大家有所帮助。 https://juejin.cn/post/7058793828123148325 https://juejin.cn/post/6977298346905960456