为什么我的 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 错误。我现在只剩下 DOMException
和 TypeError: "n is undefined"
,我一直在重构我的代码以确保没有无效的 HTML,但同样的错误仍然存在。
编辑 2
感谢@arapl3y 的评论和 link,这绝对是一个水合作用问题,我已经将问题隔离为依赖于我的 API ProjectAccordion.vue
和 ProjectItem.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 错误问题。
我正在尝试使用 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 错误。我现在只剩下 DOMException
和 TypeError: "n is undefined"
,我一直在重构我的代码以确保没有无效的 HTML,但同样的错误仍然存在。
编辑 2
感谢@arapl3y 的评论和 link,这绝对是一个水合作用问题,我已经将问题隔离为依赖于我的 API ProjectAccordion.vue
和 ProjectItem.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 错误问题。