Vercel部署Vite+React Router项目时useEffect未运行的解决步骤

第一步：修复useEffect代码的语法错误 #

你贴的useEffect代码存在明显语法错误，且逻辑写法不符合React规范，这是导致生产环境失效的核心原因之一：

// 错误代码
useEffect(() => {
  return async () => {
    const entries = await fetch(`${config.baseUrl}/entries/list` } });
    if (!entries) return;
    const jsonData = await entries.json();
    setEntries(jsonData.profiles);
  }}, []);

正确写法：不要把异步逻辑放在useEffect的清理函数（return的函数）里，React会忽略异步清理函数的执行，应直接在useEffect内部定义异步函数并调用：

useEffect(() => {
  const fetchEntries = async () => {
    try {
      const entries = await fetch(`${config.baseUrl}/entries/list`);
      if (!entries.ok) throw new Error('请求失败');
      const jsonData = await entries.json();
      setEntries(jsonData.profiles);
    } catch (err) {
      console.error('获取数据失败:', err);
    }
  };

  fetchEntries();
}, []);

第二步：排查React Router与Vercel的适配细节 #

虽然你配置了vercel.json的重写规则，仍需确认：

• 确保项目使用的是BrowserRouter而非HashRouter，Vercel的重写规则是为BrowserRouter设计的，HashRouter不需要重写但路径会带#。
• 检查所有使用useEffect的组件，是否都被正确包裹在Router上下文（<BrowserRouter>）内部，未在上下文内的组件可能出现逻辑异常。

第三步：重置Vercel构建缓存并重新部署 #

Vercel的缓存机制可能导致旧的错误代码被重复部署：

• 进入Vercel控制台的项目Deployments页面，找到最新部署记录，点击Redeploy并勾选Clear build cache，强制重新构建并部署。

第四步：检查Vite构建配置 #

确认vite.config.js中的base配置是否正确：

• 如果你的站点部署在Vercel的子路径下（比如https://your-name.vercel.app/your-project/），需要设置base: '/your-project/'，否则资源路径错误会导致组件无法正常挂载，进而影响useEffect执行。

第五步：添加日志定位执行流程 #

在useEffect内部添加日志，部署后打开浏览器控制台查看执行情况：

useEffect(() => {
  console.log('useEffect触发');
  const fetchEntries = async () => {
    console.log('发起请求');
    try {
      const entries = await fetch(`${config.baseUrl}/entries/list`);
      console.log('请求响应状态:', entries.status);
      const jsonData = await entries.json();
      console.log('解析到的数据:', jsonData);
      setEntries(jsonData.profiles);
      console.log('状态更新完成');
    } catch (err) {
      console.error('执行错误:', err);
    }
  };

  fetchEntries();
}, []);

通过日志可以明确useEffect是否触发、请求是否成功、状态是否更新，快速定位问题环节。

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