vue 单页嵌入live2D 卡通动图

效果类似如下：

会跟随随便移动。 人物都是事先生成好的，具体开发工具，后面补上。现记录加入步骤： 在打包的模板index.html 上加如下代码：

css

      /* // live 2d */
      #landlord {
        position: fixed;
        font-size: 14px;
        z-index: 6;
        left: -26px;
        bottom: -20px;
        transform: scale(0.8);
      }

      #landlord .message {
        text-align: center;
        color: coral;
      }

      #landlord .hide-button {
        position: absolute;
        right: 0;
        top: 0;
      }

Dom

    <div id="landlord">
      <div class="message" style="opacity:0"></div>
      <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
      <div class="hide-button hide">隐藏</div>
    </div>

js

  <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript">
    var message_Path = '/static/live2d/'
    var home_Path = '//katoto.cn/'
  </script>
  <script type="text/javascript" src="/static/live2d/js/live2d.js"></script>
  <script type="text/javascript" src="/static/live2d/js/message.js"></script>
  <script type="text/javascript">
    loadlive2d('live2d', '/static/live2d/model/tia/model.json')
    // loadlive2d("live2d", "/static/live2d/model/koharu/koharu.model.json");
  </script>

然后webpack 打包使用 copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin')
// ....
new CopyWebpackPlugin([
    {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
    }, {
        from: path.resolve(__dirname, '../sitemap.xml'),
        to: '../dist',
        ignore: ['.*']
    }
])

即可