Nuxt.js实战：如何高效实现ChatGPT对话功能并优化用户体验

2次阅读

没有评论

共计 2723 个字符，预计需要花费 7 分钟才能阅读完成。

在 Nuxt.js 项目中集成 ChatGPT 对话功能时，开发者常面临几个核心问题：

SSR 与 CSR 的选择困难 ：Nuxt.js 同时支持服务端渲染(SSR) 和客户端渲染(CSR)，但 ChatGPT 对话需要实时交互，传统 SSR 会导致每次对话请求都触发完整页面刷新。
API 响应延迟：直接调用 OpenAI 接口可能因网络波动或高并发导致响应缓慢，影响用户体验。
状态管理复杂化：对话历史、加载状态等需要跨组件共享，简单的 Vuex/store 可能难以应对复杂场景。
流式响应处理：ChatGPT 支持流式返回结果，但传统 AJAX 请求难以实现逐字输出的效果。

经过对比测试，我们选择 CSR 为主、SSR 为辅 的混合方案：

CSR 处理对话核心逻辑 ：利用 Nuxt 的client-only 组件包裹对话界面，避免 SSR 对实时交互的干扰
SSR 预加载关键资源 ：通过nuxtServerInit 预加载 AI 模型配置等静态数据
性能对比：
纯 SSR 方案：首屏快但交互延迟高（平均响应 1.2s）
纯 CSR 方案：交互流畅但首屏加载慢（TTFI 约 800ms）
混合方案：首屏加载 600ms+ 交互延迟 400ms

创建 /services/chatgpt.js 封装 OpenAI 调用：

import axios from 'axios';

export default class ChatGPTService {constructor(apiKey) {
    this.client = axios.create({
      baseURL: 'https://api.openai.com/v1',
      headers: {'Authorization': `Bearer ${apiKey}` }
    });
  }

  async sendMessage(messages, model = 'gpt-3.5-turbo') {
    try {
      const response = await this.client.post('/chat/completions', {
        model,
        messages,
        stream: true // 启用流式响应
      }, {responseType: 'stream'});

      return response.data;
    } catch (error) {console.error('API 调用失败:', error);
      throw new Error('对话服务暂不可用');
    }
  }
}

使用 Pinia 代替 Vuex 管理对话状态：

// stores/chat.js
export const useChatStore = defineStore('chat', {state: () => ({history: [],
    isTyping: false,
    error: null
  }),
  actions: {async sendMessage(content) {
      this.isTyping = true;
      try {const chatService = new ChatGPTService(process.env.OPENAI_KEY);
        const stream = await chatService.sendMessage([
          ...this.history,
          {role: 'user', content}
        ]);

        // 流式处理逻辑
        let fullResponse = '';
        for await (const chunk of processStream(stream)) {
          fullResponse += chunk;
          this.history[this.history.length - 1].content = fullResponse;
        }
      } catch (err) {this.error = err.message;} finally {this.isTyping = false;}
    }
  }
});

关键工具函数 processStream 实现：

async function* processStream(stream) {const reader = stream.getReader();
  const decoder = new TextDecoder();

  try {while (true) {const { done, value} = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value);
      const lines = chunk.split('\n').filter(line => line.trim());

      for (const line of lines) {const message = line.replace(/^data: /, '');
        if (message === '[DONE]') return;

        try {const parsed = JSON.parse(message);
          yield parsed.choices[0].delta?.content || '';
        } catch {console.warn('解析流数据失败:', message);
        }
      }
    }
  } finally {reader.releaseLock();
  }
}

前端缓存：对常见问题答案进行 localStorage 缓存
CDN 加速：通过 Cloudflare Workers 反向代理 OpenAI API
连接复用：配置 HTTP/ 2 连接池

// nuxt.config.js
export default {
  publicRuntimeConfig: {
    chatgpt: {rateLimit: process.env.NODE_ENV === 'production' ? 5 : 0 // 生产环境限流}
  },
  serverMiddleware: [{ path: '/api/chat', handler: '~/server-middleware/rate-limiter.js'}
  ]
}