ChantGPT很多，网上很多说的ChantGPT搭建及源码都是假的，无法使用的，自己研究了好几天，搞定了基于Vue3搭建ChantGPT前后端端源码及搭建教程，现在分享出来，有喜欢的朋友自行下载搭建，用的是openAPI官方接口和key。
搭建好的ChantGPT主要可以实现多聊天窗口，聊天记录导出下载，刷新能保持原来的内容。
先看下搭建好的截图：
chatgpt演示:www。uihtm。com/vue/19287.html
持双模型，提供了两种非官方 ChatGPT API 方法
| 方式 | 免费？ | 可靠性 | 质量 |
|---|---|---|---|
ChatGPTAPI(gpt-3.5-turbo-0301) | 否 | 可靠 | 相对较笨 |
ChatGPTUnofficialProxyAPI(网页 accessToken) | 是 | 相对不可靠 | 聪明 |
对比：
ChatGPTAPI使用gpt-3.5-turbo-0301通过官方OpenAI补全API模拟ChatGPT（最稳健的方法，但它不是免费的，并且没有使用针对聊天进行微调的模型）ChatGPTUnofficialProxyAPI使用非官方代理服务器访问ChatGPT的后端API，绕过Cloudflare（使用真实的的ChatGPT，非常轻量级，但依赖于第三方服务器，并且有速率限制）
警告：
- 你应该首先使用
API方式 - 使用
API时，如果网络不通，那是国内被墙了，你需要自建代理，绝对不要使用别人的公开代理，那是危险的。 - 使用
accessToken方式时反向代理将向第三方暴露您的访问令牌，这样做应该不会产生任何不良影响，但在使用这种方法之前请考虑风险。 - 使用
accessToken时，不管你是国内还是国外的机器，都会使用代理。 - 把项目发布到公共网络时，你应该设置
AUTH_SECRET_KEY变量添加你的密码访问权限，你也应该修改index.html中的title，防止被关键词搜索到。
切换方式：
- 进入
service/.env.example文件，复制内容到service/.env文件 - 使用
OpenAI API Key请填写OPENAI_API_KEY字段 (获取 apiKey) - 使用
Web API请填写OPENAI_ACCESS_TOKEN字段 (获取 accessToken) - 同时存在时以
OpenAI API Key优先
环境变量：
全部参数变量请查看或这里
/service/.env.example
待实现路线
[✓] 双模型
[✓] 多会话储存和上下文逻辑
[✓] 对代码等消息类型的格式化美化处理
[✓] 访问权限控制
[✓] 数据导入、导出
[✓] 保存消息到本地图片
[✓] 界面多语言
[✓] 界面主题
[✗] More…
前置要求
Node
node 需要 ^16 || ^18 || ^19 版本（node >= 14 需要安装 fetch polyfill），使用 nvm 可管理本地多个 node 版本
node -v
PNPM
如果你没有安装过 pnpm
npm install pnpm -g
填写密钥
获取 Openai Api Key 或 accessToken 并填写本地环境变量 跳转
# service/.env 文件# OpenAI API Key - https://platform.openai.com/overview
OPENAI_API_KEY=# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` response
OPENAI_ACCESS_TOKEN=
安装依赖
为了简便
后端开发人员的了解负担，所以并没有采用前端workspace模式，而是分文件夹存放。如果只需要前端页面做二次开发，删除service文件夹即可。
后端
进入文件夹 /service 运行以下命令
pnpm install
前端
根目录下运行以下命令
pnpm bootstrap
测试环境运行
后端服务
进入文件夹 /service 运行以下命令
pnpm start
前端网页
根目录下运行以下命令
pnpm dev
环境变量
API 可用：
OPENAI_API_KEY和OPENAI_ACCESS_TOKEN二选一OPENAI_API_MODEL设置模型，可选，默认：gpt-3.5-turboOPENAI_API_BASE_URL设置接口地址，可选，默认：https://api.openai.com
ACCESS_TOKEN 可用：
OPENAI_ACCESS_TOKEN和OPENAI_API_KEY二选一，同时存在时，OPENAI_API_KEY优先API_REVERSE_PROXY设置反向代理
通用：
AUTH_SECRET_KEY访问权限密钥，可选MAX_REQUEST_PER_HOUR每小时最大请求次数，可选，默认无限TIMEOUT_MS超时，单位毫秒，可选SOCKS_PROXY_HOST和SOCKS_PROXY_PORT一起时生效，可选SOCKS_PROXY_PORT和SOCKS_PROXY_HOST一起时生效，可选HTTPS_PROXY支持http，https,socks5，可选ALL_PROXY支持http，https,socks5，可选
运行地址
http://localhost:3002/
```yml
version: '3'services:app:image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可ports:- 127.0.0.1:3002:3002environment:# 二选一OPENAI_API_KEY: sk-xxx# 二选一OPENAI_ACCESS_TOKEN: xxx# API接口地址，可选，设置 OPENAI_API_KEY 时可用OPENAI_API_BASE_URL: xxx# API模型，可选，设置 OPENAI_API_KEY 时可用OPENAI_API_MODEL: xxx# 反向代理，可选API_REVERSE_PROXY: xxx# 访问权限密钥，可选AUTH_SECRET_KEY: xxx# 每小时最大请求次数，可选，默认无限MAX_REQUEST_PER_HOUR: 0# 超时，单位毫秒，可选TIMEOUT_MS: 60000# Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效SOCKS_PROXY_HOST: xxx# Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效SOCKS_PROXY_PORT: xxx# HTTPS 代理，可选，支持 http，https，socks5HTTPS_PROXY: http://xxx:7890
OPENAI_API_BASE_URL可选，设置OPENAI_API_KEY时可用OPENAI_API_MODEL可选，设置OPENAI_API_KEY时可用
手动打包
后端服务
如果你不需要本项目的
node接口，可以省略如下操作
复制 service 文件夹到你有 node 服务环境的服务器上。
# 安装
pnpm install# 打包
pnpm build# 运行
pnpm prod
PS: 不进行打包，直接在服务器上运行 pnpm start 也可
前端网页
1、修改根目录下 .env 文件中的 VITE_GLOB_API_URL 为你的实际后端接口地址
2、根目录下运行以下命令，然后将 dist 文件夹内的文件复制到你网站服务的根目录下
参考信息
pnpm build
常见问题
Q: 为什么 Git 提交总是报错？
A: 因为有提交信息验证，请遵循 Commit 指南
Q: 如果只使用前端页面，在哪里改请求接口？
A: 根目录下 .env 文件中的 VITE_GLOB_API_URL 字段。
Q: 文件保存时全部爆红?
A: vscode 请安装项目推荐插件，或手动安装 Eslint 插件。
Q: 前端没有打字机效果？
A: 一种可能原因是经过 Nginx 反向代理，开启了 buffer，则 Nginx 会尝试从后端缓冲一定大小的数据再发送给浏览器。请尝试在反代参数后添加 proxy_buffering off;，然后重载 Nginx。其他 web server 配置同理。
