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();
});

不用擔心發佈後能不能訪問，發佈打包後項目會處於同一域名，不會出現跨越問題。