从零搭建 Live2D 看板娘教程（自建API避墙版）

[2、修改live2d api路径（第35～36行）](#2、修改live2d api路径（第35～36行）)

受live2D开源协议及其许可证的约束，项目的源代码无法在本文中展示，请前往本文提供的相关网站进行下载。用作展示的所有 Live2D 模型、图片、动作数据等版权均属于其原作者，仅供研究学习，不得用于商业用途。

这期是我折腾了3天看板娘的经历，之后稍微整理了一下形成了这个教程，自认为是目前最详细的。自建api，彻底避免github被墙的问题（懂的都懂），且能够在服务器稳定运行；

从0开始手搓api显然是不可能的，这时候我们就要借用前人的经验：下载大佬的api

指路：https://github.com/pudding0503/live2d-package（下面我准备好了一份）

下载解压后应有以下文件

其中，live2d-api为后端api接口文件（包含模型及其他配置文件）；live2d-widget为前端载入 live2d 的模型和服务。若只使用自带的模型，直接将live2d-api文件上传到服务器即可；对于live2d-widget文件我们需要进行一点小修改

进入live2d-widget打开autoload.js，修改 autoload.js 文件第2行的目录为自己的插件路径（我用的是自己服务器的ip地址+路径，域名暂时没备案），即live2d-widget文件夹，路径最后的/一定要加！

并修改第35～36行 live2d api 的路径为自己搭建的路径

源文件内的 apiPath 是被注释的，需删掉注释，同时，也可将 cdnPath 删除，并不会影响什么。

到这，第一步已经完成了，务必确保以上设置的路径正确！

接下来，将autoload.js引入到html文件中，示例代码：

html 复制代码

<script src="autoload.js"></script>

同理，务必确保src中的路径正确

最后，引入一个css样式表即可

html 复制代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

不出意外已经能正常使用了，效果展示：

效果演示网站：