教你node+vue3建一个gpt对话web，附免费在线对话网站_vue3.0 实现 gpt对话框

如何搭建一个AI对话web网站

本文使用用 Express 和 Vue3，后端使用nodejs

本文介绍了一种超低成本搭建私有化AI服务的方法，你可以通过这个服务与好友分享，并在内部学习如何使用，省去翻和线路不稳定的困扰。此外，你还可以进行二次开发，深入了解API细节，并为自己介入其他系统做好准备。另外，你还可以在此基础上封装一个鉴权系统，从其他用户那里收取授权费用。

参考demo 传送门

首先下载这个项目https://github.com/Chanzhaoyu/chatgpt-web
然后我们需要配置一些参数

Node

node 需要 ^16 || ^18 || ^19 版本（node >= 14 需要安装 fetch polyfill），使用 nvm 可管理本地多个 node 版本

node -v
1

PNPM

如果你没有安装过 pnpm

npm install pnpm -g
1

填写密钥

获取 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=
1
2
3
4
5
6
7

安装依赖

为了简便 后端开发人员 的了解负担，所以并没有采用前端 workspace 模式，而是分文件夹存放。如果只需要前端页面做二次开发，删除 service 文件夹即可。

后端

进入文件夹 /service 运行以下命令

pnpm install
1

前端

根目录下运行以下命令

pnpm bootstrap
1

测试环境运行

后端服务

进入文件夹 /service 运行以下命令

pnpm start
1

前端网页

根目录下运行以下命令

pnpm dev
1

环境变量

API 可用：

• OPENAI_API_KEY 和 OPENAI_ACCESS_TOKEN 二选一
• OPENAI_API_MODEL 设置模型，可选，默认：gpt-3.5-turbo
• OPENAI_API_BASE_URL 设置接口地址，可选，默认：https://api.openai.com
• OPENAI_API_DISABLE_DEBUG 设置接口关闭 debug 日志，可选，默认：empty 不关闭

ACCESS_TOKEN 可用：

• OPENAI_ACCESS_TOKEN 和 OPENAI_API_KEY 二选一，同时存在时，OPENAI_API_KEY 优先
• API_REVERSE_PROXY 设置反向代理，可选，默认：https://ai.fakeopen.com/api/conversation，社区（注意：只有这两个是推荐，其他第三方来源，请自行甄别）

通用：

• 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，可选

参考demo 传送门