为什么用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读取/显示数据。

（尽管自此修复以来，我的Adobe字体现在已损坏，但这是另一个线程的另一个问题:)）