1. 在合适的地方插入

<canvas id="live2d" width="280" height="250"></canvas>

2. 将静态资源，即 live2d 所采用的模型 model.moc 、模型配置文件 model.json 、模型皮肤 textures/some.png 、 模型动作 motions\*.mtn 、声音 sounds\*.mp3 置入 \docs\.vuepress\public\live2d 中，这样在 vuepress 打包时，会自动置入静态文件夹中。

3. 在 script 标签下的 vue 生命周期钩子 mounted 中引入调用方法，

mounted() {
  import('./live2d.min.js').then(()=>{loadlive2d("live2d", this.$withBase("/live2d/model.json"))})
},

注意引入 js 的路径，此案例中两者在同一路径，故使用 ./ ，请按照实际情况自行修正。

4. 最后，别忘记在 css 中书写好 canvas 的样式。

示例：

canvas#live2d {
  position: fixed;
  left: 20px;
  bottom: 200px;
}

5. 出现的问题

Q：build 时 navigator is not defined 问题

A：因 live2d.min.js 采用 window 以及 navigator 对象，需要在 vue.js 渲染页面后方可使用，应通过 import 方法，在回调中调用 loadlive2d 方法。

Q：为何要使用 this.$withBase 包裹路径

A：this.$withBase 是 vuepress 提供的自动包裹 base 的一个内置 helper,可以帮助你生成正确的路径。以避免修改 config.js 中的 base 项后，路径失效。