Hexo博客LeanCloud Valine引入av-min.js失败

为了最好的阅读体验及最新更新，请访问个人博客链接

---

由于之前的Hexo博客主题（Matery）过于花哨，并且开发者已经不再维护，因此准备迁移到新的主题上（Butterfly），由于每个主题的配置文件都不同，因此除了纯文本内容，其他全部需要重新配置，包括导致所有博客的更新时间都被覆盖为最新日期、所有文章的阅读数全部清空等。

在配置到评论系统Valine时，发现无法读取LeanCloud中的Comments，并且也无法正常显示评论数。本文分享一种解决问题的思路，可能不一定与大家的情况完全相同，可以作为参考。

---

发现问题

之前一直是使用的Valine的评论组件，因此在更换主题后需要保留之前的数据，在主题的_config.yml中设置相关配置后，发现前端的评论数一直在加载，并且文章页无法显示之前应该存在的评论内容。

根据这样的错误情况，定位到应该是Valine组件的问题，首先想到的是权限问题无法访问LeanCloud。但是在检查配置文件中的appId和appKey之后，发现权限应该是没有问题的，并且LeanCloud中的内容也是存在的。

然后根据评论数一直在Loading的情况，去看了一下网页控制台，果然发现了错误。

报错文件是Valine.min.js，果然是Valine的问题。然后根据报错内容，发现应该是无法请求这个av-min.js文件。通过自己访问，即使是使用了魔法，也确实不存在该文件。

既然定位到了问题所在，接下来我们要去源码中更具体地定位到底哪里出了问题。

在项目中直接全局搜索Valine.min.js

看到这个Valine.min.js是外部引入的，直接控制台-network中找到他的请求地址

我们手动访问一下这个文件，搜索av-min.js

成功定位到了错误的点。

那么整个过程已经很清楚了，Butterfly引用了外部的一个Valine.min.js文件，在这个js中又引用了外部的av-min.js文件，但是这个文件并不存在，因此整个加载过程也会出错。

---

解决问题

既然已经成功定位到了这个错误，那么如何修复的思路也很明显了。

Butterfly主题提供了一个CDN配置项，可以直接引用外部js，因此我们可以自己托管一个Valine.min.js，把里面的av-min.js路径进行修改，能够支持国内网络环境稳定访问的。

把我们刚才访问的Valine.min.js下载到本地，搜索并修改其中av-min.js的路径为一个可访问的路径，然后托管到云端

直接修改_config.yml -> CDN -> option中的valine配置项为自己托管的Valine.min.js

到此已经基本解决这个问题了，但是在实践过程中博客页会出现“401”错误。

这个需要修改配置项中的serverURLs为LeanCloud的RestAPI即可