1.问题
设计师用spline捣鼓了好几天的高大上的动效，交给前端去呈现，code资源包都给了。心想，这还不简单，照着demo教程，把资源引入页面就完了，没啥技术含量。然鹅然鹅，车就这么翻了......，vue中实际引入资源包的时候报错了......
资源包单独能跑起来，为啥在vue中就报错了呢，有一点可以确认肯定不是资源包的问题。 看报错信息，是webpack打包报错了。百度了一下，原来是webpack版本与spline打包文件冲突了。 遇到webpack版本问题，一般人肯定一万匹草泥马在心中奔涌而过，尼玛版本问题又不是我的问题，适配版本这坑太深了......。然鹅，奔涌完了，问题还是要解决的。 既然是版本问题，那把spline的版本降低一下试试？降低了好几个版本，报错依旧，看来此路不通(不会有人说，你为啥不试试降低webpack的版本？这问题就像，航母上一架飞机不能起飞，为啥不换航母一样......)。
后来想到public文件夹，不会经过webpack打包，提供了一条第三方包的逃生通道。去vue-cli看文档， 求证了一下，果真可以这么搞，而且文档写的很清楚，public文件夹存在的原因，其中重要一条，就是在webapck冲突的情况下，绕开webpack。
年轻人，就是不看文档啊！
2.解决
顺着public文件夹的思路，将所需的dom标签写入到index.html中，将js写入到init-spline.js文件中
浏览器热更新，效果竟然自动出来了！有点小激动啊，捣鼓了个把小时，终于出结果了！
3. 运气
其实之前的init-spline.js版本不是这样的......,之前的是这样的：
朴实无华的4句代码
一开始自动出效果，但后来一刷新就报错了
后来刷好多次，依旧报错。 我去，之前的没报错的效果是怎么出来的？！，老天还是很眷顾我啊，虽然没有完全解决问题，但是给了我希望，指明了方向，有时干成事儿，真是不可避免的靠运气的成分。
4. 继续找原因
看报错信息，是addEventListener相关的错误，凭借驰骋前端这么多年的经验，直觉告诉我，是在dom渲染前去获取dom没有获取到，进而挂载event事件的时候报错了。
5. 验证
将上面简单的4句代码的基础上， 加上了循环获取dom，直到获取成功，用到了try-catch错误捕捉，sleep延时函数，经过几次验证，彻底解决了这个问题，yeah！
6. 准备优化
虽然效果出来了，问题解决了，但是加载速度有点慢，也感觉有些复杂，不够优雅。 下班在地铁上又想到了一个优化的方法，用发布订阅模式，当canvas元素mounted的时候，触发一个事件，然后获取dom来初始化动画，对，应该这么干才够优雅。然鹅然鹅......， public引入emitter报错了，
可能是静态文件不能用常规姿势使用模块的原因，至于为什么，我也不知道....., 看来这个优化，目前只能搁置了，后面探索到更好的方法，再试试。
7.小结
总结一下这次故障排查的关键词：需要一定基础经验，需要运气成分，需要不断重构代码。
