时间戳

首页 > 解决方案 > 为什么我的 Nuxt.js 应用在使用 Netlify 部署后显示空白页面？

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

问题描述

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

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

Netlify 构建设置

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

Web 检查错误日志

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

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

编辑 2 感谢@arapl3y 的评论和链接，这绝对是一个水合问题，我已将问题隔离为依赖于我的 APIProjectAccordion.vue和ProjectItem.vue.

我仍然不确定问题的实际原因，但是当我尝试从我的 Heroku API 获取数据时，它看起来正在发生，我可以通过我的 Heruoku URL 访问和填充我的数据库，所以它引导我相信这是将 API 输入到我的应用程序中的中间点，而我的应用程序在某处很糟糕。

标签： javascriptvue.jsdeploymentnuxt.jsnetlify

解决方案

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

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

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

推荐阅读