低版本浏览器适配

低版本浏览器兼容

根据vue3+vite官方文档说明，支持的浏览器参考如下截图。

图片

平台 实际最低支持
iPhone ✅iOS 16.4+
Android ✅Android 10+（实际更高更稳是 11+）
PC ✅ 2023年以后浏览器

当前浏览器支持范围大致对应现代系统版本，但在实际使用中（尤其是微信内置浏览器），WebView 内核版本可能低于系统默认浏览器版本。

总体原则是：浏览器越新，对现代语法支持越好，性能表现也更优。

如果确实需要兼容低版本浏览器，可以参考相关适配方案进行处理。但需要注意：

  • 当前测试的最低兼容环境为 iOS 12（对应 Safari 12）
  • 即使完成兼容处理，仍可能存在部分功能异常，无法完全保证所有功能正常
  • 兼容方案的目标主要是：
    • 避免白屏
    • 确保页面能够正常进入系统
  • 无法做到 100% 功能无差异（低版本浏览器存在很多不兼容的css和js内容，无法保持和高版本浏览器一模一样的体验。这个问题无法解决。如果需要解决需要自己去单独写css做支持）

同时需要明确：

  • 兼容低版本浏览器会 显著增加打包体积
  • 会对 页面加载速度和运行性能产生负面影响
  • 目前不存在兼顾“高性能”和“低版本完全兼容”的解决方案

因此：

👉 非必要情况下不建议开启低版本兼容

项目默认未开启相关兼容配置。如确有需求，可参考文档自行开启（取消注释）或进行二次开发适配。

iOS 12 兼容改造（直接按下面改）

1. 先安装



```bash
pnpm add core-js regenerator-runtime
pnpm add -D @vitejs/plugin-legacy

2. 改 package.json

确认有以下内容（没有就加上）：

{
  "dependencies": {
    "core-js": "^3.49.0",
    "regenerator-runtime": "^0.14.1"
  },
  "devDependencies": {
    "@vitejs/plugin-legacy": "^8.0.0"
  },
  "browserslist": [
    "iOS >= 12",
    "Safari >= 12",
    "Chrome >= 64",
    "Edge >= 79",
    "Firefox >= 67",
    "not IE 11"
  ]
}

3. 改 vite.config.mts

把下面关键段落加进去（已存在就对齐参数）：

import legacyPlugin from "@vitejs/plugin-legacy";

plugins: [
  legacyPlugin({
    targets: ["iOS >= 12", "Safari >= 12", "Chrome >= 64", "Edge >= 79", "Firefox >= 67", "not IE 11"],
    modernPolyfills: true,
    additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
  })
]

esbuild: {
  target: "es2015",
  supported: {
    "optional-chain": false,
    "nullish-coalescing": false
  }
}

build: {
  target: ["es2015", "safari12"]
}

4. 改 main.ts（收敛到一个方法）

直接改成下面这种结构：低版本不支持async await等语法

import "core-js/stable";
import "regenerator-runtime/runtime";

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import pinia from "./stores";

const app = createApp(App);

async function bootstrap() {
  app.use(router);
  app.use(pinia);
  app.mount("#app");
}

bootstrap();

export default app;

如果你还有异步初始化逻辑（如系统配置、i18n、权限），统一塞进 bootstrap() 里。

5. index.html（一般不需要加，实在不行可以尝试下）

在 <head> 加一行：

<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=default,es2015,es2016,es2017,es2018,es2019,es2020"></script>

如果你们环境不能走外网，把这条改成自托管地址即可。

6. 验证

pnpm install
pnpm build

检查点：

  1. iOS 12 打开不白屏。
  2. 控制台没有 Unexpected token '?' 或 Unexpected token '??'。
  3. 登录、路由跳转、表单提交正常。

新版本兼容

如果是你是v3.6版本的话，你只需把相关的注释打开就行。

文件包含

tduck-x-front\src\main.ts

tduck-x-front\vite.config.mts