国产浏览器兼容性问题解决

本文链接：https://blog.csdn.net/weixin_45188172/article/details/139629589

问题来源

众所周知，兼容性问题一直是前端一大难题，从PC到移动端，头皮发麻。现在又有了兼容国产浏览器的问题，各种各样的浏览器。

JS兼容性

js兼容性比较好说，一般页面都加载不出来使用core-js降降版本就好了，网上解决方案也很多，Vite玩家直接使用@vitejs/plugin-legacy就好了。

plugins: [
      legacyPlugin({
        targets: ["defaults", "ie >= 11", "chrome 52"],
        renderLegacyChunks: true,
      }),
    ],

CSS兼容性

这是我最近遇到的问题，页面不报错，样式全没了，这就得用postcss-preset-env，然后列一下几个css兼容性插件作用，以供参考：

postcss-preset-env（真要实现兼容性处理，css做转换处理）
Autoprefixer（自动化需要的属性添加浏览器厂商的私有前缀）
postcss-color-rgba-fallback（IE8不支持rgba()颜色，转换成十六进制）
postcss-opacity（给IE浏览器添加滤镜属性，作为降级处理）
postcss-pseudoelements（让IE8中不仅支持一个冒号:，也支持::的伪元素）
postcss-vmin（让IE9支持viewport相对单位vmin）
node-pixrem（让IE10以下不支持rem单位转成px单位） postcss-cssnext（让CSS高级新语法得到支持，优雅降级）

 css: {
      postcss: {
        plugins: [
          // 解决css兼容性问题
          postcssPresetEnv(),
        ],
      }
    },