🚀 效果预览

在线预览

• 私有部署示例：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	核心地址，请求此 API 加载模型数据	String	https://cdn.jsdelivr.net/npm/live2d-static-api@latest/indexes
model	默认显示的 [模型号, 服装ID]	Array	['Potion-Maker/Pio', 'school-2017-costume-yellow']
width/height/size	模型的宽度/高度/宽度和高度	Number	0 / 0 / 255
direction	模型停靠方位 (left / right)	String	right
tipPosition	提示框位置 (top / bottom)	String	top
tips	自定义交互提示语配置	Object	详见 /src/options/tips.js
speechApi	语音接口，点击对话图标时请求的 API 地址	String	https://v1.hitokoto.cn
speechContentFormat	内容格式化函数，解析 API 返回的数据	Function	接收 API 返回的原始数据对象，并返回一个字符串
homePage	点击主页链接跳转的地址	String	本项目主页地址
customId	同一页面加载多个模型时的识别 ID	String	vue-live2d-main

📡 核心参数 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。