最近做的項目呢，圖標比較多，之前沒有使用精靈圖，通過webpack設置，小於6k的打成base64，這樣子，我的css會有一點點偏大（通過背景圖引入的），后來想着試試精靈圖了，然后一陣百度，其實大家用的工具都大同小異吧，貼一個我參考的博客（https://juejin.im/post/6844903954736742413）
其實正常的弄呢，是沒啥問題的，我在這個過程中踩了一點點的坑
1，精靈圖的路徑問題
apiOptions: {
cssImageRef: "./assets/images/sprite/sprite.png"
},
這個路徑就是生成的css里面引用圖片的路徑，需要根據自己的項目來，如果直接相對路徑是有問題的，顯示不了圖片
2，就是適配rem了，我的做法簡單粗暴，就是直接將px全部換算成rem，具體的換算比例根據自己的實際情況來，像我的是px/200 = 1rem
這樣，當你npn run dev/serve 就可以在相應目錄生成css和對應的精靈圖了
比較方便
如果圖片固定了的話，就可以在vue.config.js里面注釋掉生成精靈圖的步驟，自己將精靈圖該壓縮的壓縮，畢竟生成的圖還是挺大的呢，
說個我之前不知道的css小知識，對於不使用css,可以使用unset值例如
top: unset;
bottom: 0.5rem;
這個對於覆蓋之前的屬性，寫新屬性比較有用。