如何在vue项目中调用chatgpt的API接口

在Vue项目中调用ChatGPT的API接口需要以下步骤：

1. 在Vue项目中安装axios，使用以下命令进行安装：

   npm install axios --save

2. 在Vue项目中创建一个API模块，用于封装与ChatGPT的API交互逻辑。可以在项目根目录下创建一个api目录，并在该目录下创建一个chatgpt.js文件，代码如下：

   import axios from 'axios';
   
   const API_URL = 'https://api.chatgpt.com';
   
   export default {
     async getResponse(message) {
       const response = await axios.post(`${API_URL}/api/chat`, { message });
       return response.data;
     },
   };

3. 在Vue组件中引入API模块，并调用其中的方法：

   <template>
     <div>
       <input v-model="message" @keyup.enter="sendMessage" />
       <div v-for="(msg, index) in messages" :key="index">
         {{ msg }}
       </div>
     </div>
   </template>
   
   <script>
   import chatgptAPI from '@/api/chatgpt';
   
   export default {
     data() {
       return {
         message: '',
         messages: [],
       };
     },
     methods: {
       async sendMessage() {
         const response = await chatgptAPI.getResponse(this.message);
         this.messages.push(response.message);
         this.message = '';
       },
     },
   };
   </script>

   在上述代码中，我们在组件中引入了chatgptAPI模块，并在sendMessage方法中调用了该模块中的getResponse方法，将用户输入的消息发送到ChatGPT的API接口，并将返回的消息添加到页面中。