使用vecel免费搭建一个自己的chatgpt网站 图文教程
使用vecel免费搭建一个自己的chatgpt网站 图文教程详细图文教程已经打包成Word文档，喜欢的下载后观看。
说明
类似的项目GitHub还有，可以去GitHub上找，挺多都是带vecel一键部署的。
## 使用 Vercel 免费搭建自己的 ChatGPT 网站
### 一、引言
随着人工智能技术的飞速发展，ChatGPT 等聊天机器人程序因其强大的自然语言处理能力而备受关注。本文将详细介绍如何使用 Vercel 这一云服务平台，免费搭建一个属于自己的 ChatGPT 网站，并提供图文教程，帮助读者轻松实现从零到一的搭建过程。
### 二、Vercel 简介与优势
Vercel 是一个云服务平台，支持静态网站和动态网站的应用部署、预览和上线。它内置 CI/CD（持续集成/持续部署），能够自动构建和部署代码，极大地简化了开发流程。Vercel 还提供了丰富的功能和插件，如 Serverless 函数、API 路由等，为开发者提供了强大的工具集。此外，Vercel 还支持与多种前端框架和库的集成，如 React、Vue 等，使得开发者能够快速上手并构建出高性能的应用程序。
### 三、准备工作
在开始搭建 ChatGPT 网站之前，我们需要做好以下准备工作：
1. **注册 Vercel 账号**：访问 Vercel 官网，注册一个账号并登录。
2. **安装 Node.js 和 npm**：确保你的开发环境中已经安装了 Node.js 和 npm（Node.js 的包管理工具）。
3. **创建一个新的 Vercel 项目**：在 Vercel Dashboard 中，点击“New Project”按钮，选择你想要部署的项目文件夹，然后点击“Deploy”按钮。这将初始化你的 Vercel 项目，并生成一个包含项目基本信息的文件结构。
### 四、搭建 ChatGPT 网站
#### 1. 项目结构设计
为了构建一个功能完善的 ChatGPT 网站，我们需要设计一个合理的项目结构。建议的项目结构如下：
/chatgpt-website
│── /public
│ ├── index.html
│ └── styles.css
│── /src
│ ├── App.vue
│ ├── main.js
│ └── router.js
│── /api
│ └── chat.js
│── package.json
│── vercel.json
其中，`public` 目录用于存放静态资源文件，`src` 目录用于存放前端源码，`api` 目录用于存放与后端交互的 API 接口定义，`package.json` 用于定义项目的依赖关系和脚本命令，`vercel.json` 用于配置 Vercel 部署选项。
#### 2. 编写前端代码
使用你喜欢的前端框架（如 React、Vue 等）编写网站的前端代码。以下以 Vue.js 为例进行说明：
##### a. 创建 Vue 应用
在 `src` 目录下创建一个 `main.js` 文件，并添加以下代码来初始化 Vue 应用：
javascript
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
##### b. 配置路由
在 `src` 目录下创建一个 `router.js` 文件，并使用 Vue Router 配置路由规则：
javascript
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Chat from '../views/Chat.vue';
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/chat', name: 'Chat', component: Chat }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
##### c. 创建组件
在 `src/views` 目录下创建 `Home.vue` 和 `Chat.vue` 组件，分别用于展示首页和聊天界面。这里以 `Chat.vue` 为例进行简单演示：
html
ChatGPT
{{ msg.text }}
export default {
data() {
return {
messages: [],
inputText: ''
};
},
methods: {
sendMessage() {
// 发送消息到后端 API 并更新聊天记录
}
}
};
##### d. 样式美化
在 `public` 目录下创建一个 `styles.css` 文件，并添加一些基本的样式来美化我们的网站：
css
body {
font-family: Arial, sans-serif;
}
.chat {
max-width: 600px;
margin: auto;
}
.messages {
margin-bottom: 10px;
}
input {
width: calc(100% - 20px);
padding: 10px;
margin-top: 10px;
}
#### 3. 配置后端 API
为了实现 ChatGPT 的功能，我们需要调用 OpenAI 提供的 API。可以使用 Vercel 的 Serverless Functions（无服务器函数）来处理这些请求。在 `api` 目录下创建一个 `chat.js` 文件，并添加以下代码：
javascript
const axios = require('axios');
const openai = require('openai');
const { Configuration, OpenaiApi } = openai;
const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
const openaiApi = new OpenaiApi(configuration);
async function generateResponse(prompt) {
try {
const response = await openaiApi.createCompletion({
model: "text-davinci-003",
prompt: prompt,
max_tokens: 150,
temperature: 0.7,
});
return response.data.choices.text.trim();
} catch (error) {
console.error('Error generating response:', error);
return 'Something went wrong!';
}
}
module.exports = async (req, res) => {
const { inputText } = req.body;
const response = await generateResponse(inputText);
res.status(200).json({ response });
};
请确保你已经在 Vercel 的环境变量中设置了 `OPENAI_API_KEY`。你可以通过 Vercel Dashboard -> Project Settings -> Build & Deploy -> Secrets & Buildpacks 来设置环境变量。
#### 4. 部署到 Vercel
完成以上步骤后，你可以在本地运行以下命令来启动开发服务器：
bash
npm run serve
然后在浏览器中访问 `http://localhost:8080`，你应该能够看到你的 ChatGPT 网站的基本界面。接下来，我们将这个项目部署到 Vercel。在 Vercel Dashboard 中，点击 “Deploy” 按钮，等待部署完成后，你就可以通过 Vercel 提供的域名来访问你的 ChatGPT 网站了。
**** Hidden Message *****
有道理。。。 6666666 不错不错，楼主您辛苦了。。。 有道理。。。 6666666 6666666 不知该说些什么。。。。。。就是谢谢 帮你顶下哈 66666666666666666