使用Netlify部署后，为什么我的Nuxt.js应用程序显示空白页？

Question

我正在尝试使用Netlify和Heroku部署Nuxt.js网站，我的构建通过了Netlify，但是链接显示空白页（https://fervent-swanson-d4b450.netlify.app/）。我已经尝试过在线阅读一些教程，并尝试针对具有相同问题的React应用来调整SO上的其他答案，但是我无法弄清楚发生了什么以及为什么它不起作用。

这是我第一次使用Nuxt / Vue构建Web应用程序并进行实时部署，我的代码库位于github https://github.com/KyleSFraser/Portfolio上，我的netlify构建设置如下。

Web inspect显示以下错误，但是我无法理解为什么我的网站没有显示。

在解决我的网站为何显示空白方面的任何帮助将不胜感激。

编辑 通过成功添加建议的生产URL并在Strapi数据库上进行了一些设置，我设法解决了CORS错误。现在剩下的是DOMException和TypeError: "n is undefined"，我一直在重构代码，以确保没有无效的HTML可以做到这一点，但仍然存在相同的错误。

编辑2 感谢@ arapl3y的注释和链接，这绝对是一个水化问题，我已将问题隔离为依赖于我的API ProjectAccordion.vue和ProjectItem.vue的组件。

我仍然不确定问题的真正原因，但是当我试图从Heroku API提取数据时，好像正在发生，我可以通过Heruoku URL访问和填充数据库，所以它使我相信这是将API馈入我的应用程序的中间点，而该应用程序在某个地方很无聊。

Answer 1

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

一旦我确保Netlify的env变量与我的nuxt.config匹配，错误就会消失并且我的应用程序已开始从我的API读取/显示数据。

也有一些Invalid HTML引起了水合作用问题。我在父组件上有<ul>标签，并试图在子组件中生成<li>项。我认为在部署时，这些被解释为空的<ul>标签。 我将<ul>移到了实际的<li>项上的子组件上，这解决了DOMExcepption错误的问题。