这两天，博主在逛GitHub的时候发现一个很好玩的表情小球项目
emotion ball，正好计划重写博客的主题，就打算在博客中引用这个小球。
引入过程
使用非常简单，项目说明也明确有写
按顺序引入四个脚本(无构建、无依赖)即可创建实例，而在Vue中只需要在index.html中引入就好了，因为原项目的小球形状和颜色比较单一，加上我要多次使用，所以将小球封装为一个组件，使用时可以传递参数展现各种形状各种颜色的小球。详细代码这里不展示，需要的可以在评论区留言。
本地有效果，上线却没有
很快在本地运行效果很完美，所有小球都有交互，有动画，
效果我也非常满意，于是在完成所有工作之后打包上线，打开在线地址一看一个球都没有，控制台也没有报错信息，遇事问Ai，给我的答案是看看js文件是不是没有加载上，打开网络发现加载成功了，我尝试着点击示波器的位置，奇怪的是点击之后小球出现了，但是别的位置就不行。
解开谜底
一番寻找无果后我想看看实际的dom结构，打开源代码发现其余位置都是空的，跟本地运行时不一样，而小球组件EmotionBall.vue有一段代码是
if (!EB || !rootEl.value) return所以小球加载失败是静默状态，而且window.EmotionBall 未定义，说明相关j虽然加载了，但是没有使用，于是我打开打包之后的index.html文件发现Vite在打包之后会把在body底部的
提到head底部去，因此Vue 应用先执行、引擎脚本后执行，当组件挂载时 window.EmotionBall 还是 undefined，所以小球全部消失，于是把 4 个引擎脚本移到 中（Vite 注入点之前），再次上线就发现问题解决了。
