vue 项目中使用svga格式动画图标效果 incorrect header check解决办法

1. 什么是SVGA

SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！
SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。
动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 SVGAPlayer 之后直接使用。

2. 效果图

3. 安装依赖

npm install svgaplayerweb --save

4. svga.vue

<template>
    <div class="container">
        <div id="demoCanvas" class="svga" ref="canvas"></div>
    </div>
</template>
<script>
import SVGA from "svgaplayerweb";

export default {
    data() {
        return {};
    },
    created() {},
    mounted() {
        var player = new SVGA.Player("#demoCanvas");
        var parser = new SVGA.Parser("#demoCanvas");
        parser.load("/svga/01.svga", function(videoItem) {
            player.setVideoItem(videoItem);
            player.startAnimation();
        });
    }
};
</script>
<style>
.svga {
    width: 200px;
    height: 200px;
    margin: 100px auto;
}
</style>

5. incorrect header check解决办法

之前有同学问我这个，确实开发中也遇到了，这里补充下怎么解决的。

因为是之前这里写的是直接引入本地文件，默认是访问不到会出现 incorrect header check 报错问题

之前我做的时候也遇到了这个问题，是跟后端沟通，把文件放在服务器上，然后本地去做访问。

那我们可以通过后端给的地址，通过服务器地址访问试下。

好家伙，又出现了跨域，因为本地项目地址和服务器的域名地址不一致所以会出现跨越。

那我们可以在通过 vue.config.js 里面做代理处理（因为我是把文件直接放在 svga 文件夹下的，所以可以通过 /svga 去匹配到这个地址）

注意的是，这里改了，页面引入就要改成 /svga/01.svga 才能匹配到代码地址

parser.load("/svga/01.svga", function(videoItem) {
  	player.setVideoItem(videoItem);
   player.startAnimation();
});

不用担心发布后能不能访问，发布打包后项目会处于同一域名，不会出现跨越问题。