vue3 + vite兼容ie浏览器

### Vue3 与 Vite 构建工具兼容 IE 浏览器的方法

为了让基于 Vue3 的项目能够兼容 Internet Explorer (IE)，特别是像 IE11 这样的旧版浏览器，需要采取一系列措施来确保项目的兼容性和稳定性。这不仅涉及到安装特定的插件，还需要调整配置文件以适应这些老式环境的要求。

#### 安装必要的依赖项

首先，需确认已安装 `@vitejs/plugin-legacy` 插件用于支持老旧浏览器：

pnpm install @vitejs/plugin-legacy -D

此外，为了处理压缩后的 JavaScript 文件中的某些特性，建议也安装 Terser 工具：

pnpm install terser -D

这两步操作可以为后续配置提供基础保障[^3]。

#### 配置 Vite 来启用 Legacy 支持

接下来，在 `vite.config.ts` 中引入并配置 `@vitejs/plugin-legacy` 插件，以便于区分现代和传统模式下的资源加载路径。具体来说，可以通过设置目标浏览器列表以及指定所需的 Polyfill 库来增强对较早版本浏览器的支持能力：

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

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11'], // 明确指出哪些浏览器应该被考虑进去
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      polyfills: ["es.promise.finally", "es/map", "es/set"],
      modernPolyfills: ["es.promise.finally"]
    })
  ]
})

这段代码片段展示了如何通过修改 `targets` 参数来控制所针对的具体浏览器范围，并且指定了额外的 Polyfill 资源以弥补 ES6 特性缺失的情况[^4]。

值得注意的是，对于 IE11 等非常古老的浏览器而言，除了上述配置外，还应当注意检查 HTML 模板内的语法结构是否符合标准；同时也要留意第三方库的选择及其自身的兼容性问题。

#### 处理潜在错误

当遇到类似于 `Uncaught SyntaxError: Unexpected token '?'` 的异常提示时，通常是因为当前使用的 JavaScript 代码包含了不被低版本浏览器识别的新特性——比如可选链运算符 (`?.`) 或者空值合并运算符 (`??`)。此时应避免直接在模板字符串或其他地方使用这类新特性的表达方式，转而采用更广泛接受的传统写法，或者借助 Babel 等编译工具来进行转换处理。