Vite+React开发环境启动本地WordPress后页面空白求助

以下是针对性的排查和解决步骤：

• 检查本地域名映射与DNS缓存
  确认你的Vite+React项目的本地访问地址（如localhost:5173或自定义域名）没有被hosts文件指向WordPress服务器。打开hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts；Mac/Linux：/etc/hosts），确保React项目的域名对应127.0.0.1且无重复映射。之后刷新DNS缓存：

  • Windows：ipconfig /flushdns
  • Mac：sudo dscacheutil -flushcache

• 查看浏览器开发者工具定位问题
  打开F12开发者工具，重点检查两个面板：

  • Console：查看是否有JS加载失败、路由错误或权限类报错，这些是页面空白的常见原因。
  • Network：检查index.html及Vite生成的JS资源请求是否成功，确认响应内容是Vite的页面而非WordPress的HTML。如果响应是WordPress内容，说明请求被意外接管。

• 调整Vite的base路径配置
  如果WordPress的路由与Vite项目的根路径冲突，可给Vite设置独特的base路径避免拦截。修改vite.config.js：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/react-dev-app/', // 设置独特的子路径
    server: {
      port: 5174, // 确保与WordPress端口完全不同
    }
  })
  

  之后访问http://localhost:5174/react-dev-app/测试。

• 清除浏览器缓存与禁用Service Worker
  浏览器可能缓存了旧的WordPress页面资源，导致请求被误导：

  • 按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）硬刷新页面。
  • 在开发者工具的Network面板勾选「禁用缓存」，重新加载。
  • 如果项目使用了Service Worker，可在Application面板的Service Workers选项中注销它，或在Vite开发环境中临时禁用（可通过注释注册代码实现）。

• 排查本地服务器/代理工具冲突
  如果你用Nginx、Apache等服务器托管WordPress，检查虚拟主机配置是否存在端口转发或域名规则覆盖了Vite的请求。另外，关闭正在运行的代理工具（如Charles、Fiddler），避免它们修改请求路由。

内容的提问来源于stack exchange，提问作者abdulmalik ali