如何将Vite React JS开发的ChatBot集成至现有WordPress网站？

方法一：使用ReactPress插件完成集成 #

• 安装并激活ReactPress插件
  在WordPress后台的「插件」→「添加新插件」中搜索ReactPress，安装后激活。
• 创建新的ReactPress应用
  进入WordPress后台的「ReactPress」→「添加新应用」，填写应用名称（比如chatbot-app），选择默认存储路径，点击「创建应用」。
• 替换默认项目文件
  找到服务器上ReactPress生成的应用目录（一般在wp-content/reactpress/apps/chatbot-app），删除目录内所有文件，把本地ChatBot的dist文件夹里的所有内容复制进去。
• 配置应用访问路径
  回到ReactPress应用列表，编辑刚创建的应用，在「前端URL」处填写访问路径（比如/chatbot-app），保存设置。
• 嵌入到页面/文章
  新建或编辑目标页面，插入短代码[reactpress_app name="chatbot-app"]，发布后即可展示ChatBot。

方法二：手动嵌入打包后的静态文件 #

• 上传静态文件到服务器
  在WordPress服务器的wp-content/uploads目录下新建chatbot文件夹，把本地ChatBot的dist文件夹内所有文件上传到这个新建目录。
• 在页面中添加嵌入代码
  编辑目标页面，切换到「代码编辑器」模式，插入以下代码（注意替换[你的哈希值]为dist/assets文件夹里实际的文件哈希，比如index-abc123.js）：

  <div id="chatbot-root"></div>
  <script type="module" src="/wp-content/uploads/chatbot/assets/index-[你的哈希值].js"></script>
  <link rel="stylesheet" href="/wp-content/uploads/chatbot/assets/index-[你的哈希值].css">
  

• 调整样式（可选）
  如果ChatBot布局异常，可添加自定义CSS：

  #chatbot-root {
    width: 100%;
    min-height: 600px;
    margin: 20px 0;
  }
  

  把这段代码添加到WordPress后台的「外观」→「自定义」→「额外CSS」中。

常见问题排查 #

• 路径错误：确保静态文件的URL和站点URL协议一致（比如全站HTTPS就用HTTPS路径）。
• 跨域问题：如果ChatBot需要调用外部API，需确保API允许当前WordPress域名的跨域请求。
• 路由冲突：若ChatBot是单页应用，建议放在独立页面，避免和WordPress现有页面的slug重复。

内容的提问来源于stack exchange，提问作者Hafiz Muhammad Zohair Ajmal