L2Dwidget讓自己的vue項目騷起來

預覽

直接使用，不想將模型或者js文件放到自己的CDN，則直接按照下面的步驟

下面的地址是我自己的github地址倉庫，文件一般不會刪除，直接引入鏈接即可

node項目

• 安裝需要的js

npm install -S live2d-widget

• 在需要的頁面引入（jsonPath就是可配置項，具體想要的模型請去倉庫自己找就可以）
• 模型倉庫地址：https://github.com/wangsrGit119/wangsr-image-bucket/tree/master/L2Dwidget

import {L2Dwidget} from 'live2d-widget'

.........省略......................

  created() {
        setTimeout(function () {
            L2Dwidget.init({
                model: {
                    jsonPath: 'https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/live2d-widget-model-haruto/assets/haruto.model.json',
                }
            });
        },1000);
    }

普通html使用

• 換不同的模型請根據倉庫下不同名稱替換即可

<script src="https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/js/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
  model: {
    jsonPath: 'https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/live2d-widget-model-haruto/assets/haruto.model.json',
  }
});

</script>

想將模型文件和js文件單獨部署到自己內網或者私有CDN

在開源git地址下載所需要的任務模型並安裝js

• 模型下載（git地址：https://github.com/xiazeyu/live2d-widget.js）

 git clone  https://github.com/xiazeyu/live2d-widget-models

• js安裝

node項目直接：npm install -S live2d-widget
普通html項目：
1.隨便找個文件夾執行 npm install live2d-widget
2.在生成的node_modules中找到 _live2d-widget@*.*.*@live2d-widget *代表版本
3.將該文件夾內的lib目錄復制到內網或者私有CDN，代理映射出內網地址即可

• nginx 配置示例（D:/live2D就是放置模型和js的位置）

location /live2D-resource {
	# 允許跨域請求處理
	add_header 'Access-Control-Allow-Origin' $http_origin;
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
	add_header 'Access-Control-Allow-Headers' 'Origin, x-requested-with, Content-Type, Accept, Authorization';
	add_header 'Access-Control-Expose-Headers' 'Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma';
	if ($request_method = 'OPTIONS') {
	add_header 'Access-Control-Max-Age' 1728000;
	add_header 'Content-Type' 'text/plain; charset=utf-8';
	add_header 'Content-Length' 0;
	return 204;
	}
	alias D:/live2D;
	allow all;
	autoindex on;
	}

使用同上，只不過所有src/jsonPath鏈接換成自己內網連接地址即可

最后

• 求贊贊，求關注，有問題請留言
• 文章來源公眾號 蘇克分享