我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

1. 用 Vite 的爽点

之前，我用 《《 合 成 大 西 瓜 》 重 制 版 ！（ 联 机 版 在 做 了 ）》。

以前用 Webpack 的难处

不得不说，用 Vite 作为构建工具，是真的方便啊！

以前每当启动一个项目，通常都会用 Webpack 初始化一下，然后手动配置自己所需的几个 loader 和 plugin，搞好开发环境、编译脚本，才能开始业务代码的开发。

当然，这种操作做多了，开发者往往会封装自己专用的脚手架，只要 copy 一份以前项目的 Webpack 配置、或者运行个自己写的脚本，就能开始业务逻辑开发了。但这也挺麻烦的，并不是每个人都想得到。

Vite 确实带来了诸多便利

现在，Vite 就像是一个配置好的通用脚手架，内置了各种拿来即用的东西，不再需要开发者手动配 Loader、Plugin 了，确实方便！另外 Vite 带来的极速开发体验，大家也是常常夸赞，不必我不多说了。

所以，我开发《《 合 成 大 西 瓜 》 重 制 版 ！（ 联 机 版 在 做 了 ）》时，因为想迅速做个 MVP 的单机版，就直接拿了 Vite 来使用，让我不再花精力在打包构建上，只需要全身心投入业务逻辑开发，非常爽！

2. 用 Vite 的不便之处

在带来诸多便利的同时，Vite 也有一些点，让我有些难受：

开发和生产环境体验不统一

最明显的差异就是「样式」。我的 css 是在 js 中动态加载的。所以开发环境下：页面会先闪一下无样式的版本，等 js、css 下载好了，再展现有 css 的版本。

生产环境下表现不一样，因为编译后，css 和 js 都放进了 head 标签，只有 css 加载完毕，才会展示 body 的内容。

内置很多工具和选项

Vite 内部有一些既定的 Loader、Plugin、编译选项，是对开发者不透明的，只有我们去仔细阅读文档，看到每一个配置参数，才知道它的细节。

这种内置了很多常用工具，对于小白来说是好事儿，不用关注那么多，能把所需的资源 import 和展示就 OK。但是对于习惯 Webpack 的开发者就比较痛苦，他们希望弄懂每一个细节，从而达到理想的优化效果。尤其是看到编译产物不符合预期的时候，还要想方设法找到可以修改配置的地方，改成自己期望的配置。

3. 我被 Vite 坑的故事

我被 Vite 坑，是由以上 2 点共同导致的：开发和生产环境体验不统一、内置很多工具和选项。

我开发环境下，在本地 PC 端、移动端测试都是正常的，但是发布后，移动端样式有些兼容性问题，如下图：

正常的样式：

主要差异就在于左上角的「游戏列表」按钮，它其实是一个<a>标签，你知道它为什么不能是<button>标签吗？参考本专栏另一篇文章《用户体验好的 Button，在手机上不应该有 Hover 态》。

差异在于：color 相关的 css 样式全都没有生效！

包括按钮的文字颜色、背景色、《一行简单的样式，让网页有「高级感」》。

4. 寻找解决方案过程

我怀疑是 color 相关的问题，看了一下编译产物，color 全部变成这种格式了：#rrggbbaa，这种格式兼容性并不好。在我的华为浏览器上，无法正常展示。手机挺新的，如果我的手机无法正常展示，那么估计有至少 20%左右的人，也无法正常展示。

但是这在开发环境下是正常的呀～我并没有提前发现问题，直接发布到线上了。太危险了！好在不是公司的业务，只是个人的小玩具。

看了编译产物，我才知道，开发环境下 color 没有被压缩，color 还是跟你写的 css 是一致的。但是打包时，会把所有 color 变成 #rrggbbaa 格式，导致安卓 webview 无法识别。

我尝试去看 Vite 文档，搜索引擎搜索，得到第一个解决方案是设置build.minify=false。试了下，确实可行，但是这就不压缩代码了啊，肯定不是好的解决方案！

import { defineConfig } from 'vite';
export default defineConfig({  plugins: [],  build: {    minify: false,  },});

随后尝试的第二个解决方案是build.minify使用terser，文档如下: https://vitejs.dev/config/#build-minify

实验后，未果，css color 依然被压缩了。

随后我在 Github 搜索相关 issue，找到了这个：

https://github.com/vitejs/vite/issues/4650

原来是 esbuild 默认会把 css 都压缩下，顺便把 color 也简化了：

since vite 2.5.0，it use esbuild to minify css will cause this issue

终于得到了最好的方案，如下。

5. 解决方案

修改vite.config.ts，设置build.cssTarget为chrome61即可：

import { defineConfig } from 'vite';
// https://vitejs.dev/config/export default defineConfig({  plugins: [],  build: {    cssTarget: 'chrome61',  },});

真是被这个小问题坑哭了啊。

6. 建议

现在存在很多安卓 webview 不支持 #rrggbbaa 这种 color，vite 现在默认打包配置居然是将 css 里 color 压缩为 #rrggbbaa 格式。估计以后的版本会更新吧，已被标记为 vite 的 p3-minor-bug 了。

现在只能靠人工经验，把坑躲一躲了。C 端产品慎用啊！如果要用，一定要针对打包产物做好完备的自动化测试啊！

7. 写在最后

我是 HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。