CodePen结果是白色空白页

Question

这是我的Codepen链接：

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

过去几个月它运作正常。但现在它转向白色空白页。我测试它到其他网络浏览器仍然是相同的。

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

感谢。

Answer 1

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

Answer 2

如果您查看控制台，您会看到对ip-api.com的请求已加载HTTP而Codepen希望您通过HTTPS加载该请求。因此，它会阻止您的请求以及屏幕保持空白的原因。

错误：

  

混合内容：＆＃39; https://codepen.io/ShikhaA/pen/ALJXyk＆＃39;是通过HTTPS加载的，但是请求了一个不安全的XMLHttpRequest端点＆＃39; http://ip-api.com/json＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。

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

Answer 3

如果对任何人有帮助，我会在CodePen上获得空白输出，因为我没有将vuetify添加到我的Vue实例中。确保您的Vue实例具有以下内容：

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

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