记录 vue3 语法降级为es5 兼容部分低版本浏览器方法

用vue3官方的插件@vitejs/plugin-legacy

安装依赖

// node版本需要在v18以上 vite版本需要在v5以上，并且依赖terser

"devDependencies": {

    "@vitejs/plugin-legacy": "^5.4.0",

    "@vitejs/plugin-vue": "^4.1.0",

    "terser": "^5.31.0",

    "vite": "^5.2.8"

  }

vite.config.js

import { defineConfig, loadEnv } from 'vite'

import legacyPlugin from '@vitejs/plugin-legacy'

import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode }) => {
    return{
        plugins: [

          vue(),

          legacyPlugin({

            targets: ['defaults', 'chrome 52', 'ie >= 11','Safari >= 8'],  // 需要兼容的目标列表，可以设置多个

            additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件

            renderLegacyChunks: true,

            polyfills: true,

            modernPolyfills: true,

          })

        ],
        build: {

          target: ['ios8', 'edge90', 'chrome52', 'firefox90', 'safari8']

        },
    }

})

打包结果 在dist/index.html里会增加一套nomodule的js

  <script nomodule> xxx </script>

  <script nomodule crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-Ss3QoOZ6.js"></script>

  <script nomodule crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-D6qUkzWl.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>