vue-live2d

🚀 效果预览

在线预览

• 私有部署示例：https://live2d.evgo2017.com/
• GitHub Pages：示例展示

本地预览

git clone https://github.com/evgo2017/vue-live2d.git
cd ./vue-live2d
npm install
npm run serve

📦 安装与使用

# 1. 安装组件
npm install vue-live2d

# 2. 在组件中引入
import vueLive2d from 'vue-live2d'
export default {
  components: { vueLive2d }
}

本组件同时支持 Vue 2 (^2.7.x) 和 Vue 3 (Options/Composition API)，并提供了测试用例。

⚙️ 配置参数 (Props)

📡 核心参数 apiPath

1. 方法一：项目本地集成（避开第三方接口失效） 将 live2d-static-api 的 indexes 放入项目的 public 目录，你可以彻底告别后端维护，实现极致的加载和稳定性：

   apiPath="./live2d-static-api/indexes"
   

   

2. 方法二：NPM / CDN 模式（推荐，极致稳定） 利用 NPM 公用 CDN 加速，实现零环境依赖的静态分发：

   apiPath="https://cdn.jsdelivr.net/npm/live2d-static-api@latest/indexes" // 推荐 JSdelivr
   apiPath="https://unpkg.com/live2d-static-api@latest/indexes"          // 国内 Unpkg
   apiPath="https://raw.githubusercontent.com/evgo2017/live2d-static-api/main/indexes" // GitHub
   

其它参数说明

• model：切换模型或换装时，控制台会输出相关编码信息，直接复制即可。

• 宽高控制：width 和 height 的优先级高于 size。建议使用 size 统一缩放，以减少模型重新加载的次数。

• 多模型同屏：通过 customId 可以在同一页面渲染多个组件。但受限于核心库逻辑，同一时间通常只有一个模型支持动态交互。

• 💬 语音对话 (Speech)：你可以通过自定义接口和格式化函数，让看板接入任何内容源（如：诗词、名言、甚至 AI 回复）：

<!-- 自定义用法 -->
<vue-live2d 
  speechApi="https://api.xxx.com/api" 
  :speechContentFormat="(content) => `自定义解析和返回内容 ${content}`" 
/>

📈 Star History

参考资料与核心库

[1] fghrsh/live2d_demo [2] stevenjoezhang/live2d-widget [3] fghrsh/live2d_api

尝试过基于 Live2D 官网发布的 Live2D_SDK_WEBGL_2.1 SDK 中的 live2d.min.js、Live2DFramework.js 和 sampleApp1，和 live2d.min.js 代码进行二次梳理。技术链路遵循：Core -> Framework -> App -> vue-live2d。

联系方式

若遇到问题，请提交 issue。或访问 evgo2017.com/about。