在Vue项目中调用ChatGPT的API接口需要以下步骤:
- 在Vue项目中安装axios,使用以下命令进行安装:
npm install axios --save
- 在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;},};
- 在Vue组件中引入API模块,并调用其中的方法:
{{ msg }}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 = '';},},};
在上述代码中,我们在组件中引入了chatgptAPI模块,并在sendMessage方法中调用了该模块中的getResponse方法,将用户输入的消息发送到ChatGPT的API接口,并将返回的消息添加到页面中。