[JS入门到进阶] 哎，被vite小坑了一波，大家记得配置build.cssTarget为'chrome61'

我是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端、移动端测试都是正常的，但是发布后，移动端样式有些兼容性问题，如下图：

正常的样式：

主要差异就在于左上角的「游戏列表」按钮，它其实是一个标签，你知道它为什么不能是标签吗？参考本专栏另一篇文章《用户体验好的 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/vit...

原来是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 噢～我有空了会分享做游戏的相关技术。