Vue3 + antdv4 + Vite 项目构建兼容低版本浏览器

Vue3 + antdv4 + Vite 项目构建兼容低版本浏览器

项目背景： 我们做的是一个政府项目，该政府部门浏览器版本普遍偏低，每个用户使用浏览器的情况都不一样。该项目是一个基于vue3+vite4+antdv4的一个现代浏览器项目，项目初期并未了解到该情况。导致部分用户页面出现antd样式丢失，且出现一些js错误。

本篇文章将详细介绍 Vite项目如何配置构建项 来支持低版本浏览器兼容性，vite官方提供@vitejs/plugin-legac插件来为打包后的文件提供传统浏览器兼容性支持。该项目因为使用 Ant Design for Vue 4+组件库，该版本组件库默认不支持低版本浏览器，但提供兼容样式的配置项。

重点在于 Vite 的构建选项、使用 @vitejs/plugin-legacy 插件（需要安装 terser 插件），以及 Ant Design Vue 4 的样式配置。

一、配置 Vite

在 vite.config.js 文件中，配置构建选项，并添加 @vitejs/plugin-legacy 插件。

1.1 安装 @vitejs/plugin-legacy 及相关依赖

首先，确保已经安装 @vitejs/plugin-legacy 插件和 terser 插件：

npm install @vitejs/plugin-legacy terser --save-dev

1.2 更新 vite.config.js 文件

在 vite.config.js 文件中，添加对 @vitejs/plugin-legacy 插件的配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'Chrome >= 64'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es.object.assign',
        'es.map',
        'es.set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all',
        'es.array.iterator',
        'es.string.includes',
        'es.string.starts-with',
        'es.object.values',
      ],
    })
  ],
  build: {
    minify: 'terser', // 使用 terser 进行压缩
    chunkSizeWarningLimit: 4096,
    terserOptions: {
      compress: {
        drop_console: true, // 可选：移除 console.log 语句
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
          antd: ['ant-design-vue', '@ant-design/icons-vue'],
        },
      },
    },
    target: ['es2015', 'chrome64'], // 兼容到低版本浏览器，大于等于 chrome64
  },
})

1.3 构建选项说明

• legacy 插件配置：

  • targets: 指定需要支持的浏览器版本。
  • additionalLegacyPolyfills: 额外的 polyfill。
  • renderLegacyChunks: 是否生成传统版本的 chunk。
  • polyfills: 具体的 polyfill 列表。

• build 配置：

  • minify: 使用 terser 进行压缩。
  • chunkSizeWarningLimit: 设置 chunk 大小警告阈值。
  • terserOptions: terser 压缩选项。
  • rollupOptions.output.manualChunks: 自定义 chunk 分割策略。
  • target: 指定构建目标，确保生成的代码兼容低版本浏览器。

二、Ant Design Vue 4 的样式兼容

为了确保 Ant Design Vue 4 的样式在低版本浏览器中正常显示，我们需要进行一些额外的配置。

2.1 引入 Ant Design Vue 样式

在项目的 main.js 文件中，引入 Ant Design Vue 样式：

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

const app = createApp(App)
app.use(Antd)
app.mount('#app')

2.2 样式兼容

根据 Ant Design Vue 的兼容性文档，在 Vue 组件中使用 StyleProvider 取消默认的降权操作：

<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'

dayjs.locale('zh-cn')

const locale = zhCN

const appStore = useAppStore()
</script>

<template>
  <a-config-provider
    :theme="appStore.theme"
    :locale="locale"
  >
    <a-style-provider hash-priority="high" :transformers="[legacyLogicalPropertiesTransformer]">
      <RouterView />
    </a-style-provider>
  </a-config-provider>
</template>

三、引用文献

cn.vitejs.dev/config/buil...
cn.vitejs.dev/guide/build...
github.com/vitejs/vite...
next.antdv.com/docs/vue/co...