为什么我的 Nuxt.js 应用在使用 Netlify 部署后显示空白页面?

Why does my Nuxt.js app display a blank page after deploying with Netlify?

我正在尝试使用 Netlify 和 Heroku 部署 Nuxt.js 站点,我的构建在 Netlify 上通过,但 link 显示空白页面 (https://fervent-swanson-d4b450.netlify.app/)。我已经尝试按照一些在线教程进行操作,并尝试针对具有相同问题的 React 应用程序调整 SO 上的其他答案,但我无法弄清楚发生了什么以及为什么它不起作用。

这是我第一次使用 Nuxt/Vue 构建 Web 应用程序并实时部署一个,我的代码库在 github 此处 https://github.com/KyleSFraser/Portfolio,我的 netlify 构建设置如下。

Web 检查显示以下错误,但我无法理解它们以了解为什么我的网站未显示。

如能解决我的网站显示空白的原因,我们将不胜感激。

编辑 我设法通过按照建议成功添加生产 URL 并在 Strapi 数据库上进行一些设置来修复 CORS 错误。我现在只剩下 DOMExceptionTypeError: "n is undefined",我一直在重构我的代码以确保没有无效的 HTML,但同样的错误仍然存​​在。

编辑 2 感谢@arapl3y 的评论和 link,这绝对是一个水合作用问题,我已经将问题隔离为依赖于我的 API ProjectAccordion.vueProjectItem.vue 的组件。

我仍然不确定问题的真正原因,但看起来它是在我尝试从我的 Heroku API 获取数据时发生的,我能够访问并填充我的通过我的 Heruoku URL 数据库,所以它让我相信这是将 API 送入我的应用程序的中间点,该应用程序在某处被搞砸了。

我的一个 Netlify 环境变量正在寻找 GRAPHQL_URL 而我的 nuxt.config.js 正在寻找 BACKEND_URL ,这就是问题所在。

一旦我确定 Netlify 的环境变量与我的 nuxt.config 匹配,错误就消失了,我的应用程序开始读取/显示来自我的 API 的数据。

还有一些 Invalid HTML 导致了水合作用问题。我在父组件上有 <ul> 标签,并试图在子组件中生成 <li> 项。我认为在部署时这些被解释为空 <ul> 标签。 我移动了 <ul> 以将实际的 <li> 项包装在子组件上,它解决了 DOMExcepption 错误问题。