使用Vue3和Vite实现对低版本浏览器的兼容

export default defineConfig({
  build: {
    target: 'es2015'
  }
});

npm install @vitejs/plugin-legacy terser -D

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

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      // 在这里可以指定需要兼容的浏览器版本
      targets: ['firefox < 59', 'chrome < 60'],
      // 其他配置选项
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        // 列出需要添加的polyfill
        'es.symbol', 'es.promise', 'es.promise.finally',
        'es/map', 'es/set', 'es.array.filter',
        // ...其他polyfill
      ]
    })
  ],
  // 其他配置...
});

npm install --save-dev @babel/core @babel/preset-env @vitejs/plugin-babel

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "defaults" // 或指定具体的浏览器版本
    }]
  ]
}

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

export default defineConfig({
  plugins: [
    vue(),
    babel({
      presets: [
        ['@babel/preset-env', {
          targets: "defaults" // 或指定具体的浏览器版本
        }]
      ]
    })
  ]
  // 其他配置...
});