我有一个使用 Next.JS 和 Firebase 构建并部署在 Vercel 上的 Web 应用程序。 一切都工作正常,直到最近我添加了一个底部导航栏,其位置设置为静态,底部:0。
在底部导航栏中,我正在渲染一个图标和一个文本。虽然它在本地主机中正常加载(使用 npm run dev
),但我意识到底部导航的内容不会在部署到 Vercel 的生产版本中呈现。在生产版本中仅渲染底部导航容器(或 div)。内部内容(图标和文本)不会呈现。
当我使用 Chrome DevTools 检查时,缺少的内部内容没有显示在已部署版本的 Elements 下,但它显示在 localhost 的 Elements 下。 我还尝试了 React Components 插件,结果相同。
这种情况常见吗?有办法解决吗?
下面是显示图标和文本的屏幕截图(第 37 - 40 行)
下面是底部导航栏的图像,显示本地主机上的内部内容
下面是底部导航栏的图像,未显示部署到 Vercel 的生产版本的内部内容
在将其推送到 Vercel 之前,您是否尝试在本地运行
npm run build
?因为在 Vercel 中它将运行构建来收集数据、生成静态页面...... 尝试运行一下,我想它会显示错误