使用vecel免费搭建一个自己的chatgpt网站 图文教程

使用vecel免费搭建一个自己的chatgpt网站 图文教程 [color=rgb(153, 153, 153) !important]
[color=rgb(153, 153, 153) !important]详细图文教程已经打包成Word文档，喜欢的下载后观看。

说明
类似的项目GitHub还有，可以去GitHub上找，挺多都是带vecel一键部署的。
[color=rgb(153, 153, 153) !important]

[color=rgb(153, 153, 153) !important]
[color=rgb(153, 153, 153) !important]

[color=rgb(153, 153, 153) !important]

[color=rgb(153, 153, 153) !important]## 使用 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 网站，我们需要设计一个合理的项目结构。建议的项目结构如下：

1. /chatgpt-website
   
2. │── /public
   
3. │   ├── index.html
   
4. │   └── styles.css
   
5. │── /src
   
6. │   ├── App.vue
   
7. │   ├── main.js
   
8. │   └── router.js
   
9. │── /api
   
10. │   └── chat.js
    
11. │── package.json
    
12. │── vercel.json

复制代码

其中，`public` 目录用于存放静态资源文件，`src` 目录用于存放前端源码，`api` 目录用于存放与后端交互的 API 接口定义，`package.json` 用于定义项目的依赖关系和脚本命令，`vercel.json` 用于配置 Vercel 部署选项。

#### 2. 编写前端代码

使用你喜欢的前端框架（如 React、Vue 等）编写网站的前端代码。以下以 Vue.js 为例进行说明：

##### a. 创建 Vue 应用

在 `src` 目录下创建一个 `main.js` 文件，并添加以下代码来初始化 Vue 应用：

1. JavaScript
   
2. import { createApp } from 'vue';
   
3. import App from './App.vue';
   
4. 
   
5. createApp(App).mount('#app');

复制代码

##### b. 配置路由

在 `src` 目录下创建一个 `router.js` 文件，并使用 Vue Router 配置路由规则：

1. Javascript
   
2. import { createRouter, createWebHistory } from 'vue-router';
   
3. import Home from '../views/Home.vue';
   
4. import Chat from '../views/Chat.vue';
   
5. 
   
6. const routes = [
   
7.   { path: '/', name: 'Home', component: Home },
   
8.   { path: '/chat', name: 'Chat', component: Chat }
   
9. ];
   
10. 
    
11. const router = createRouter({
    
12.   history: createWebHistory(),
    
13.   routes
    
14. });
    
15. 
    
16. export default router;

复制代码

##### c. 创建组件

在 `src/views` 目录下创建 `Home.vue` 和 `Chat.vue` 组件，分别用于展示首页和聊天界面。这里以 `Chat.vue` 为例进行简单演示：

1. html
   
2. 
   
3.   
   
4.     ChatGPT
   
5.    
   
6.       {{ msg.text }}
   
7.    
   
8.    
   
9.   
   
10. 
    
11. 
    
12. 
    
13. export default {
    
14.   data() {
    
15.     return {
    
16.       messages: [],
    
17.       inputText: ''
    
18.     };
    
19.   },
    
20.   methods: {
    
21.     sendMessage() {
    
22.       // 发送消息到后端 API 并更新聊天记录
    
23.     }
    
24.   }
    
25. };

复制代码

##### d. 样式美化

在 `public` 目录下创建一个 `styles.css` 文件，并添加一些基本的样式来美化我们的网站：

1. css
   
2. body {
   
3.   font-family: Arial, sans-serif;
   
4. }
   
5. 
   
6. .chat {
   
7.   max-width: 600px;
   
8.   margin: auto;
   
9. }
   
10. 
    
11. .messages {
    
12.   margin-bottom: 10px;
    
13. }
    
14. 
    
15. input[type="text"] {
    
16.   width: calc(100% - 20px);
    
17.   padding: 10px;
    
18.   margin-top: 10px;
    
19. }

复制代码

#### 3. 配置后端 API

为了实现 ChatGPT 的功能，我们需要调用 OpenAI 提供的 API。可以使用 Vercel 的 Serverless Functions（无服务器函数）来处理这些请求。在 `api` 目录下创建一个 `chat.js` 文件，并添加以下代码：

1. javascript
   
2. const axios = require('axios');
   
3. const openai = require('openai');
   
4. const { Configuration, OpenaiApi } = openai;
   
5. const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
   
6. const openaiApi = new OpenaiApi(configuration);
   
7. 
   
8. async function generateResponse(prompt) {
   
9.   try {
   
10.     const response = await openaiApi.createCompletion({
    
11.       model: "text-davinci-003",
    
12.       prompt: prompt,
    
13.       max_tokens: 150,
    
14.       temperature: 0.7,
    
15.     });
    
16.     return response.data.choices[0].text.trim();
    
17.   } catch (error) {
    
18.     console.error('Error generating response:', error);
    
19.     return 'Something went wrong!';
    
20.   }
    
21. }
    
22. 
    
23. module.exports = async (req, res) => {
    
24.   const { inputText } = req.body;
    
25.   const response = await generateResponse(inputText);
    
26.   res.status(200).json({ response });
    
27. };

复制代码

请确保你已经在 Vercel 的环境变量中设置了 `OPENAI_API_KEY`。你可以通过 Vercel Dashboard -> Project Settings -> Build & Deploy -> Secrets & Buildpacks 来设置环境变量。

#### 4. 部署到 Vercel

完成以上步骤后，你可以在本地运行以下命令来启动开发服务器：

1. bash
   
2. npm run serve

复制代码

然后在浏览器中访问 `http://localhost:8080`，你应该能够看到你的 ChatGPT 网站的基本界面。接下来，我们将这个项目部署到 Vercel。在 Vercel Dashboard 中，点击 “Deploy” 按钮，等待部署完成后，你就可以通过 Vercel 提供的域名来访问你的 ChatGPT 网站了。
[color=rgb(153, 153, 153) !important]

[color=rgb(153, 153, 153) !important]

游客，如果您要查看本帖隐藏内容请回复

有道理。。。

6666666

不错不错，楼主您辛苦了。。。

有道理。。。

6666666

6666666

不知该说些什么。。。。。。就是谢谢

帮你顶下哈

66666666666666666