javascript - CodePen 变成白色的空白页

Question

这是我的 Codepen 链接：

https://codepen.io/ShikhaA/pen/ALJXyk

从过去几个月开始，它工作正常。但现在它变成了白色的空白页。我在其他网络浏览器上测试过，还是一样。

但是当我在本地主机上尝试相同的代码时，我可以看到输出。

谢谢。

Answer 1

如果它对任何人有帮助，我会在 CodePen 上得到一个空白输出，因为我没有将 vuetify 添加到我的 Vue 实例中。确保你的 Vue 实例化有这个：

new Vue({
  el: '#app',
  vuetify: new Vuetify(), //this line must be there
  ...
});

还要确保您引用了 Vue 和 Vuetify JavaScript 库以及 Vuetify CSS 文件。

Answer 2

那是因为标题的颜色是白色的，就像背景一样。它实际上确实生成了一个输出，只是不可见。尝试更改.title-class 的颜色。

Answer 3

如果您查看控制台，您会看到对 ip-​​api.com 的请求已加载完毕，HTTP而 Codepen 希望您将其加载完毕HTTPS。因此它会阻止您的请求，这就是屏幕保持空白的原因。

错误：

混合内容：“ https://codepen.io/ShikhaA/pen/ALJXyk ”页面通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点“ http://ip-api.com/json ”。此请求已被阻止；内容必须通过 HTTPS 提供。

唯一显示的是标题（“Hello”），但它是白色的，就像背景一样，所以在您选择它之前不可见。