html 静态单页开发小记

最近遇到静态 html 单页可视化开发需求，页面后续交给后端注入 jsp 逻辑 。

工作开始拿到包含页面基础 layout 的 html 文件，在其上开发，将基础目录转化为 Vite 工程化单页项目，准备结合 sass 和 vite 来提升开发效率以及做最终打包输出，此外整个项目几乎不使用 js。

项目复杂的部分主要是 css 动画，行业正常思路是尽量使用 gif 动图处理动画，且项目中有不少粒子动画，但是该项目的旧版动画均为 css 实现，故不好多说，直接开始 coding。

开发过程中尝试了几种 web 动画封装思路，其中最可行的是将矢量图转为 svg 格式，将动画用专用软件制作进 svg 图片中，找到的可用软件有如下几个：

• macSVG
  强烈推荐，功能最强大，且免费，但容易崩溃

• shapeshifter
  比较推荐，在线编辑，无需登录注册，拥有基本调整功能，免费

• svgator
  比较推荐，在线编辑，需要注册登陆，基本调整功能免费，高级功能收费

学习和开发成本的原因，最后没有使用 svg 封装动画的思路，采用传统 css 动画开发。

开发完成后，发现 vite 打包生成的文件内资源路径均使用根路径链接，导致打开本地文件无法正常显示，后续多次调整未果，只能手动修改输出文件内的资源路径，勉强发版。

因未交代清楚项目其实有自适应需求，且重要程度极高，加之可视化项目大量使用 css 定位实现效果，原项目之上调整代码工作量大之又大，直接紧急从零重构。

重构版开发阶段直接使用 vite 从零开始，