vue3 antd rsbuild适配低版本谷歌（基于chrome56）

vue3 antd rsbuild项目需要做的适配工作（基于chrome56）

注意：以下所有选项必须都执行

1. `browserslistrc`配置：在根目录新建`.browserslistrc`文件，内容如下

Text 复制代码

chrome >= 55
> 0.5%
not dead
IE 11

2. `polyfill`配置：`rsbuild.config.ts`文件中添加配置：

typescript 复制代码

 output:{
    polyfill: 'entry',
    ...  // 其他配置
  },

3.`ant design vue`兼容：在`APP.vue`文件中添加以下代码

vue 复制代码

<template>
  <div class="router-view-box">
    <StyleProvider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
      <ConfigProvider :locale="locale">
        <router-view />
      </ConfigProvider>
    </StyleProvider>
  </div>
</template>
<script lang="ts" setup>
import { ConfigProvider,StyleProvider,legacyLogicalPropertiesTransformer } from 'ant-design-vue';

</script>

4. `axios`降级为 0.27.2版本

shell 复制代码

pnpm install [email protected]

重新启动项目
请求中包含如下配置：headers: { "Content-Type": "application/x-www-form-urlencoded",}的方法，将参数拼接到url后面，而不是放在请求体中，因为低版本axios不支持直接根据请求体和content-type来解析参数。

5. 样式写法兼容，

对于flex布局里的gap等类似的css属性，换一种方式实现。
所有十六进制格式的颜色，注意透明度不能作为十六进制写到颜色里否则静态无法解析，改用rgba的格式即可正常解析

6. 细节排查

发现document.querySelector('.main-box').scroll无法正常运行，因为scroll方法的支持范围为

Text 复制代码

Chrome：支持（Chrome 61+）。
Firefox：支持（Firefox 36+）。
Safari：支持（Safari 10.1+）。
Edge：支持（Edge 79+）。
IE：不支持。

解决办法：换一种实现方式

javascript 复制代码

// document.querySelector('.main-box')!.scroll({
//     left: document.querySelector('.main-box')!.scrollLeft - distance,
//     behavior: 'instant'
// })

//上面的写法换为
document.querySelector('.main-box')!.scrollLeft = document.querySelector('.main-box')!.scrollLeft - distance

vue3 antd rsbuild适配低版本谷歌（基于chrome56）

vue3 antd rsbuild项目需要做的适配工作（基于chrome56）

1. browserslistrc配置：在根目录新建.browserslistrc文件，内容如下

2. polyfill配置：rsbuild.config.ts文件中添加配置：

3.ant design vue兼容： 在APP.vue文件中添加以下代码

4. axios降级为 0.27.2版本

5. 样式写法兼容，

6. 细节排查

1. `browserslistrc`配置：在根目录新建`.browserslistrc`文件，内容如下

2. `polyfill`配置：`rsbuild.config.ts`文件中添加配置：

3.`ant design vue`兼容：在`APP.vue`文件中添加以下代码

4. `axios`降级为 0.27.2版本