如何在纯PHP/CSS网站中通过按钮跳转展示Three.js React项目？

1. 打包React项目 #

在你的React项目根目录下执行Vite打包命令，生成可部署的静态资源：

npm run build

执行完成后会得到一个dist文件夹，包含编译好的HTML、JS、CSS及媒体资源。

2. 部署静态资源到PHP网站 #

• 在你的PHP网站根目录下创建一个子目录（比如/table-config/），将dist文件夹内的所有文件复制进去。
• 确保你的PHP服务器（Apache/Nginx）能正常访问这个子目录下的文件。

3. 在PHP页面添加跳转按钮 #

在现有PHP页面中添加跳转按钮，直接指向静态页面的入口文件：

<button onclick="window.location.href='/table-config/index.html'">打开3D表格配置器</button>

也可以使用HTML链接标签：

<a href="/table-config/index.html" target="_blank">打开3D表格配置器</a>

4. 排查常见问题 #

• 资源加载失败：如果静态资源无法加载，修改Vite配置文件vite.config.js中的base字段，匹配你的子目录路径，重新打包后替换文件：

  export default defineConfig({
    base: '/table-config/',
    // 其他原有配置
  })
  

• MIME类型错误：若服务器返回JS/CSS文件的MIME类型异常，检查服务器配置。比如Nginx需确保配置中包含：

  types {
    text/html html;
    text/css css;
    application/javascript js;
  }
  

• 路径错误：确认所有资源的引用路径与实际部署目录一致，避免相对路径混乱。

5. 嵌入到PHP页面（可选） #

如果不想跳转新页面，可将dist/index.html的内容直接粘贴到PHP页面的对应位置，同时调整资源的引用路径为绝对路径或正确的相对路径。

内容的提问来源于stack exchange，提问作者Exploded Developer