【Vue3 / TypeScript】 项目兼容低版本浏览器的全面指南
在当今前端开发领域,Vue3 和 TypeScript 已成为主流技术栈。然而,随着 JavaScript 语言的快速演进,许多现代特性在低版本浏览器中无法运行。本文将详细介绍如何使 Vue3 + TypeScript 项目完美兼容 IE11 等低版本浏览器。
一、理解兼容性挑战
1.1 主要兼容性问题
- ES6+ 特性缺失:如箭头函数、const/let、模板字符串等
- ES2015+ API 缺失:Promise、Map、Set、Array.includes 等
- Vue3 特性依赖:如 Proxy、Reflect 等
- TypeScript 编译目标:默认输出 ES6 代码
1.2 兼容性目标
本文方案支持以下浏览器:
- Internet Explorer 11
- Chrome 50+
- Firefox 45+
- Safari 10+
二、基础配置方案
2.1 安装核心依赖
npm install --save-dev @babel/preset-env @babel/plugin-transform-runtime core-js@3 regenerator-runtime
2.2 Babel 配置
创建/修改 babel.config.js
:
module.exports = {presets: [['@babel/preset-env',{targets: {ie: '11',chrome: '50'},useBuiltIns: 'usage',corejs: { version: 3, proposals: true },debug: true}]],plugins: [['@babel/plugin-transform-runtime', {corejs: 3}]]
}
2.3 TypeScript 配置
修改 tsconfig.json
:
{"compilerOptions": {"target": "es5","lib": ["es5", "dom", "dom.iterable", "scripthost"],"downlevelIteration": true}
}
三、Vue 项目特殊配置
3.1 Vue CLI 项目配置
修改 vue.config.js
:
module.exports = {transpileDependencies: true,configureWebpack: {entry: {app: ['core-js/stable', 'regenerator-runtime/runtime', './src/main.ts']}}
}
3.2 Vite 项目配置
安装插件:
npm install @vitejs/plugin-legacy --save-dev
配置 vite.config.ts
:
import legacy from '@vitejs/plugin-legacy'export default defineConfig({plugins: [legacy({targets: ['ie >= 11'],additionalLegacyPolyfills: ['regenerator-runtime/runtime']})]
})
四、Polyfill 策略
4.1 必需的核心 Polyfill
在 main.ts
顶部添加:
// 必须放在所有导入之前
import 'core-js/stable'
import 'regenerator-runtime/runtime'// 可选:针对特定功能的polyfill
import 'core-js/features/promise'
import 'core-js/features/array/includes'
import 'core-js/features/object/assign'
import 'core-js/features/string/includes'
4.2 针对 IE 的特殊处理
// 解决IE下vue3响应式系统问题
if (typeof window !== 'undefined') {if (!window.Promise) {window.Promise = Promise}if (!window.Reflect) {import('core-js/features/reflect').then(module => {window.Reflect = module.default})}
}
五、代码编写规范
5.1 避免使用的语法
// 避免箭头函数作为方法
const obj = {// ❌ 避免method: () => { /*...*/ },// ✅ 推荐method: function() { /*...*/ }
}// 避免使用const/let声明类
// ❌ 避免
const MyClass = class { /*...*/ }// ✅ 推荐
function MyClass() { /*...*/ }
5.2 安全使用现代API
// 安全使用includes
if (!Array.prototype.includes) {import('core-js/features/array/includes')
}// 安全使用fetch
if (!window.fetch) {import('whatwg-fetch').then(({ default: fetch }) => {window.fetch = fetch})
}
六、构建优化策略
6.1 按需引入Polyfill
// babel.config.js
module.exports = {presets: [['@babel/preset-env',{useBuiltIns: 'entry', // 改为entry模式corejs: 3}]]
}
然后在入口文件:
// 根据实际需要引入
import 'core-js/features/array'
import 'core-js/features/object'
import 'core-js/features/promise'
6.2 代码分割策略
// vue.config.js
module.exports = {configureWebpack: {optimization: {splitChunks: {cacheGroups: {polyfills: {test: /[\\/]node_modules[\\/](core-js|regenerator-runtime)[\\/]/,name: 'polyfills',chunks: 'all'}}}}}
}
七、测试与验证
7.1 本地测试方案
# 安装IE测试工具
npm install --save-dev browser-sync# 添加测试脚本
"scripts": {"test:ie": "browser-sync start --server 'dist' --files 'dist' --browser 'iexplore'"
}
7.2 自动化检测
npm install --save-dev @babel/plugin-transform-runtime eslint-plugin-compat
配置 .eslintrc.js
:
module.exports = {plugins: ['compat'],rules: {'compat/compat': 'error'},settings: {polyfills: ['Promise', 'Array.prototype.includes']}
}
八、常见问题解决方案
8.1 Vue3 响应式系统问题
// src/utils/compat.ts
import { reactive, watchEffect } from 'vue'export function ieSafeReactive<T extends object>(obj: T): T {if (typeof Proxy !== 'undefined') {return reactive(obj)}// IE11降级方案const observers = new Set<() => void>()const notify = () => observers.forEach(fn => fn())return Object.keys(obj).reduce((acc, key) => {let value = obj[key as keyof T]Object.defineProperty(acc, key, {get() { return value },set(newVal) {value = newValnotify()},enumerable: true})return acc}, {} as T)
}
8.2 第三方库兼容性问题
// vue.config.js
module.exports = {transpileDependencies: ['vuex', 'axios',/@vue\/.*/,/@babel\/.*/]
}
九、性能优化建议
- 差异化加载:使用现代/传统包策略
- Polyfill CDN:考虑使用 polyfill.io 服务
- 按需加载:动态加载非关键polyfill
<script>if (!window.Promise) {document.write('<script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3/minified.js"><\/script>')}
</script>
十、总结
通过以上全面方案,你的 Vue3 + TypeScript 项目可以:
- 兼容 IE11 等低版本浏览器
- 保持现代开发体验
- 实现渐进式增强
- 维持良好的性能表现
记住,兼容性是一个系统工程,需要从工具配置、代码编写到构建优化的全流程关注。随着浏览器市场的演变,建议定期评估和调整兼容性策略。
本文方案已在多个企业级项目中验证,可支持千万级PV的稳定运行。实际应用中请根据项目具体情况调整配置参数。
相关文章:
【Vue3 / TypeScript】 项目兼容低版本浏览器的全面指南
在当今前端开发领域,Vue3 和 TypeScript 已成为主流技术栈。然而,随着 JavaScript 语言的快速演进,许多现代特性在低版本浏览器中无法运行。本文将详细介绍如何使 Vue3 TypeScript 项目完美兼容 IE11 等低版本浏览器。 一、理解兼容性挑战 …...
从零开始搭建你的个人博客:使用 GitHub Pages 免费部署静态网站
🌐 从零开始搭建你的个人博客:使用 GitHub Pages 免费部署静态网站 在互联网时代,拥有一个属于自己的网站不仅是一种展示方式,更是一种技术能力的体现。今天我们将一步步学习如何通过 GitHub Pages 搭建一个免费的个人博客或简历…...
java 设计模式 原型模式
简介 原型模式(Prototype Pattern) 是一种创建型设计模式,它通过复制现有对象来生成新对象,而不是通过 new 关键字创建。核心思想是减少对象创建的开销,尤其是当对象初始化过程复杂或代价较高时。 原型模式的核心实现…...
分别配置Github,Gitee的SSH链接
文章目录 前言一、为第二个账号生成新的密钥对二、 配置 SSH config 文件1.引入库使用 Host 别名进行 clone/push/pull注意扩展 前言 之前已经在电脑配置过Github一个仓库ssh链接,今天想配一个Gitee仓库的ssh链接。运行 ssh-keygen -t rsa提示已经存在,…...
从零开始搭建Django博客②--Django的服务器内容搭建
本文主要在Ubuntu环境上搭建,为便于研究理解,采用SSH连接在虚拟机里的ubuntu-24.04.2-desktop系统搭建,当涉及一些文件操作部分便于通过桌面化进行理解,通过Nginx代理绑定域名,对外发布。 此为从零开始搭建Django博客…...
如何用python脚本读取本地excel表格Workbook.xlsx将里面B2:B8内容,发给本地ollama大模型改写内容后写入对应C2:C8?
环境: python3.10 Win10专业版 ollama 火山引擎 影刀 问题描述: 如何用python脚本读取本地excel表格Workbook.xlsx将里面B2:B8内容,发给本地ollama大模型改写内容后写入对应C2:C8? 解决方案: 1.制作一个python脚本如下: import openpyxl import requests import…...
webpack详细打包配置,包含性能优化、资源处理...
以下是一个详细的 Webpack 5 配置示例,包含常见资源处理和性能优化方案: const path require(path); const webpack require(webpack); const { BundleAnalyzerPlugin } require(webpack-bundle-analyzer); const TerserPlugin require(terser-webp…...
MYSQL的binlog
用于备份恢复和主从复制 binlog 有 3 种格式类型,分别是 STATEMENT(默认格式)、ROW、 MIXED: STATEMENT:每一条修改数据的 SQL 都会被记录到 binlog 中(相当于记录了逻辑操作,所以针对这种格式…...
Saliency Driven Perceptual Image Compression阅读
2021 WACV 创新点 常用的评估指标如MS-SSIM和PSNR不足以判断压缩技术的性能,它们与人类对相似性的感知不一致(2和3的MS-SSIM更高,但文字反而没那么清晰)。 考虑显著区域的压缩(a)将更多的比特分配给显著区域(b&#…...
【C++ 类和数据抽象】构造函数
目录 一、构造函数的基本概念 1.1 构造函数核心特性 1.2 构造函数的作用 1.3 构造函数类型体系 二、构造函数的类型 2.1 默认构造函数 2.2 带参数的构造函数 2.3 拷贝构造函数 2.4 移动构造函数(C11 及以后) 三、初始化关键技术 3.1 成员初始…...
kotlin的kmp编程中遇到Unresolved reference ‘java‘问题
解决办法 打开 File → Project Structure → Project 确保 Project SDK 是 与你的 jvmToolchain 保持一致 如果没有,点击右上角 Add SDK 添加 JDK 路径 同步Sync 然后就正常了。 package org.example.projectimport androidx.compose.animation.AnimatedVi…...
鸿蒙Flutter仓库停止更新?
停止更新 熟悉 Flutter 鸿蒙开发的小伙伴应该知道,Flutter 3.7.12 鸿蒙化 SDK 已经在开源鸿蒙社区发布快一年了, Flutter 3.22.x 的鸿蒙化适配一直由鸿蒙突击队仓库提供,最近有小伙伴反馈已经 2 个多月没有停止更新了,不少人以为停…...
【Ultralytics 使用yolo12 读取tiff 数据异常解决】
Ultralytics 使用yolo12 读取tiff 数据解决 Ultralytics 使用yolo12 读取tiff 数据异常解决 Ultralytics 使用yolo12 读取tiff 数据异常解决 Lib\site-packages\ultralytics\utils\patches.py def imread(filename: str, flags: int cv2.IMREAD_COLOR):"""Read…...
画布交互系统深度优化:从动态缩放、小地图到拖拽同步的全链路实现方案
画布交互系统深度优化:从动态缩放、小地图到拖拽同步的全链路实现方案 在可视化画布系统开发中,高效的交互体验与稳定的性能表现是核心挑战。本文针对复杂场景下的五大核心需求,提供完整的技术实现方案,涵盖鼠标中心缩放、节点尺寸…...
GTS-400 系列运动控制器板(七)----修改限位开关触发电平
运动控制器函数库的使用 运动控制器驱动程序、dll 文件、例程、Demo 等相关文件请通过固高科技官网下载,网 址为:www.googoltech.com.cn/pro_view-3.html 1 Windows 系统下动态链接库的使用 在 Windows 系统下使用运动控制器,首先要安装驱动程序。在安装前需要提前下载…...
学习前端(前端技术更新较快,需持续关注技术更新)
目录 1. 基础三件套 1.1 HTML 1.2 CSS 1.3 JavaScript 2. 前端框架 2.1 React 2.2 Vue 2.3 Angular 3. 工程化工具 3.1 构建工具 3.2 代码质量 4. 网络和安全 4.1 HTTP/HTTPS 4.2 性能优化 5. 前沿技术 5.1 TypeScript 5.2 WebAssembly 5.3 微前端 5.4 可视…...
视频转换为MP4格式,小白工具批量转换,在线操作,简单快捷,超实用
小白工具https://www.xiaobaitool.net/videos/convert-to-mp4/ 是一款适合在线将视频转换为MP4格式的工具,尤其适合希望快速转换且无需下载安装软件的用户。以下是对该工具的详细推荐及使用建议: 一、工具特点 在线操作,无需下载 用户只需通…...
PDF处理控件Aspose.PDF指南:使用 Python 将 EPUB 转换为 PDF
EPUB是一种流行的电子书格式,用于可重排内容,而PDF则广泛用于固定版式文档,非常适合共享和打印。如果您想使用 Python 将 EPUB 转换为 PDF,Aspose.PDF for Python 提供了一个简单可靠的解决方案。在本教程中,我们将向您…...
超级扩音器手机版:随时随地,大声说话
在日常生活中,我们常常会遇到手机音量太小的问题,尤其是在嘈杂的环境中,如KTV、派对或户外活动时,手机自带的音量往往难以满足需求。今天,我们要介绍的 超级扩音器手机版,就是这样一款由上海聚告德业文化发…...
Jenkins的地位和作用
所处位置 Jenkins 是一款开源的自动化服务器,广泛应用于软件开发和测试流程中,主要用于实现持续集成(CI)和持续部署(CD)。它在开发和测试中的位置和作用可以从以下几个方面来理解: 1. 在开发和测…...
NumPy进阶:广播机制、高级索引与通用函数详解
目录 一、广播机制:不同形状数组间的运算 1. 概念 2. 广播规则 3. 实例 二、高级索引:布尔索引与花式索引 1. 布尔索引 (1)创建布尔索引 (2)布尔索引的应用 2. 花式索引 (1࿰…...
Trino分布式 SQL 查询引擎
Trino(以前称为 PrestoSQL)是一个开源的分布式 SQL 查询引擎,专为交互式分析查询设计,可对大规模数据集进行快速查询。以下从多个方面详细介绍 Trino: 主要特点 多数据源支持:Trino 能够连接多种不同类型…...
Oracle DBA 高效运维指南:高频实用 SQL 大全
大家好,这里是 DBA学习之路,专注于提升数据库运维效率。 目录 前言Top SQL表空间使用率RMAN 备份DataGuard等待事件行级锁在线日志切换用户信息ASM 磁盘组DBLink数据文件收缩AWR 写在最后 前言 作为一名 Oracle DBA,在日常数据库运维工作中&…...
SpringBoot原生实现分布式MapReduce计算
一、架构设计调整 核心组件替换方案: 1、注册中心 → 数据库注册表 2、任务队列 → 数据库任务表 3、分布式锁 → 数据库行级锁 4、节点通信 → HTTP REST接口 二、数据库表结构设计 节点注册表 CREATETABLE compute_nodes (node_id VARCHAR(36)PRIMARYKEY,last_…...
可吸收聚合物:医疗科技与绿色未来的交汇点
可吸收聚合物(Biodegradable Polymers)作为生物医学工程的核心材料,正引领一场从“金属/塑料植入物”到“智能降解材料”的范式转移。根据QYResearch(恒州博智)预测,2031年全球可吸收聚合物市场销售额将突破…...
Java从入门到“放弃”(精通)之旅——抽象类和接口⑨
Java从入门到“放弃”(精通)之旅🚀——抽象类和接口⑨ 引言 在Java面向对象编程中,抽象类和接口是两个非常重要的概念。它们为代码提供了更高层次的抽象能力,是设计灵活、可扩展系统的关键工具。 🟦一、抽…...
游戏引擎学习第239天:通过 OpenGL 渲染游戏
回顾并为今天的内容做准备 今天,我想继续完成这部分内容,因为实际上我们已经完成了大部分工作,剩下的部分并不复杂。我计划今天完成这部分实现,至少是那些不涉及纹理的部分。正如昨天所说,纹理部分才是唯一比较复杂的…...
基于Python的多光谱遥感数据处理与分类技术实践—以农作物分类与NDVI评估为例
多光谱遥感数据包含可见光至红外波段的光谱信息,Python凭借其丰富的科学计算库(如rasterio、scikit-learn、GDAL),已成为处理此类数据的核心工具。本文以Landsat-8数据为例,演示辐射校正→特征提取→监督分类→精度评…...
数字空间与VR有什么关系?什么是数字空间?
数字空间与VR的关系 数字空间与虚拟现实(VR)之间存在着紧密而复杂的关系,它们相互影响、共同促进发展。为了深入理解这一关系,我们需要明确数字空间的基本概念及其与VR技术的相互作用。 数字空间的概念 数字空间,通常…...
navicat导入sql文件 所有问题解决方法集合
问题一:mysql导入大批量数据出现MySQL server has gone away的解决方法 方法一: 查看mysql max_allowed_packet的值 show global variables like max_allowed_packet;可以看到是64M(67108864/1024/1024) 调整为所需大小 例如我们需要调整为1024M(102…...
3、有Bluetooth,LCD,USB,SD卡,PSRAM,FLASH、TP等软硬件驱动开发经验优先考虑
首先,Bluetooth驱动开发经验。蓝牙是一种无线通信技术,广泛应用于设备之间的数据传输,比如耳机、键盘、智能家居设备等。驱动开发可能涉及底层协议的实现、与硬件的交互,以及确保兼容性和稳定性。需要了解蓝牙协议栈,如…...
【k8s】PV,PVC的回收策略——return、recycle、delete
PV 和 PVC 的回收策略主要用于管理存储资源的生命周期,特别是当 PVC 被删除时,PV 的处理方式。回收策略决定了 PV 在 PVC 被删除后的行为。 回收策略的类型 Kubernetes 提供了三种主要的回收策略,用于管理 PV 的生命周期: Reta…...
K8S探针的应用
目录: 1、探针的简介2、启用探针2.1、启用就绪探针2.2、启用存活探针2.3、启用启动探针(可选) 1、探针的简介 在Kubernetes中,探针(Probes)是用来检查容器健康状况的工具,它们帮助Kubernetes了…...
c++STL——stack、queue、priority_queue的模拟实现
文章目录 stack、queue、priority_queue的模拟实现使用部分模拟实现容器适配器deque的介绍原理真实结构deque的迭代器deque的操作deque的优缺点 stack的模拟实现按需实例化queue的模拟实现priority_queue的模拟实现为何引入仿函数代码实现 stack、queue、priority_queue的模拟实…...
【Redis】字符串类型List 常用命令详解
文章目录 1. 添加1.1 lpush - 从左或Rpush - 从右添加元素1.2 linsert - 插入新值到某个值前后 2. 获取2.1 lrange - 根据区间获取值2.2 lindex - 根据下标获取值2.3 llen - 获取列表的长度 3. 删除3.1 lpop - 移除最左或rpop - 最右的元素3.2 lrem - 移除指定的值3.3 rpoplpus…...
.NET仓储层在 using 块中创建 SqlSugarClient 的风险
如题,先看代码示例 using 块的使用 public ISugarQueryable<T> GetSet(Expression<Func<T, bool>> whereExpression null) {using (SqlSugarClient dbClient SqlSugarInstance.GetInstance()){var query dbClient.Queryable<T>();if (w…...
PowerQuery逆透视将二维表转换为一维表
PowerQuery逆透视将二维表转换为一维表 原因:为什么要转成一维表? 实例: 1.例如如果用二维表做占比图,我们需要将所有的指标列添加到值上,如图: 2.如果用一维表,我们只需要添加一个指标列和一…...
谐振模态图
t0时刻,原边Q6、Q7导通副边Q1、Q4导通 T1时刻,原边谐振回路电流,由负变正,过零点,副边绕组电流小于负载电流,输出电容放电 T2时刻,副边绕组电流等于负载电流,输出电容不充不放 T3时…...
Idea 配置 Git
1、下载Git 下载地址: Git - Downloading Package 2、win 打开 git bash ,配置邮箱和用户名 //配置邮箱 git config --global user.email "710419844qq.com" //配置全局用户名 git config --global user.name "smelodys" 3、ide…...
B + 树与 B 树的深度剖析
在数据库领域,B 树和 B 树是两种极为关键的数据结构,它们对于数据的存储、查询以及索引的构建等方面都有着深远的影响。深刻理解这两种树的原理、特性以及它们之间的差异,对于数据库的性能优化、数据组织和管理等工作具有不可替代的重要作用…...
MongoDB索引
一、索引核心价值 MongoDB索引通过构建高效查询路径,从根本上改变数据检索方式。当未建立索引时,数据库引擎被迫执行全集合扫描(COLLSCAN),如同在无序的书架上逐本查找目标书籍。通过建立索引,查询复杂度从…...
Docker--Docker网络原理
虚拟网卡 虚拟网卡(Virtual Network Interface,简称vNIC) 是一种在软件层面模拟的网卡设备,不依赖于物理硬件,而是通过操作系统或虚拟化技术实现网络通信功能。它允许计算机在虚拟环境中模拟物理网卡的行为࿰…...
Java 性能优化:如何在资源受限的环境下实现高效运行?
Java 性能优化:如何在资源受限的环境下实现高效运行? 在计算机系统中,性能优化是一项至关重要的任务,尤其是在资源受限的环境下,如何让 Java 程序高效运行是许多开发者面临的挑战。本文将深入探讨 Java 性能优化的策略…...
Spring之我见 - Spring MVC重要组件和基本流程
核心组件详解 前端控制器 - DispatcherServlet 作用:所有请求的入口,负责请求分发和协调组件。 public class DispatcherServlet extends HttpServlet {// 核心服务方法protected void doService(HttpServletRequest request, HttpServletResponse re…...
MongoDB常用命令
数据库操作 显示所有数据库 show dbs 切换/创建数据库 (如果数据库不存在则创建) use <database_name> 删除当前数据库 db.dropDatabase() 查看当前数据库 db 查看数据库状态 db.stats() 集合操作 显示当前数据库中的所有集合 show collections 创建集合 d…...
Java Set/List 知识点 Java面试 基础面试题
Java Set/List 知识点 Set与List区别 List 有序、值可重复,内部数据结构 Obejct[ ] 数组Set 无序、值不重复,内部数据结构 HashMap keyobject value固定new Object() ArrayList 有序存储元素允许元素重复,允许存储 null 值支持动态扩容非线程安全 HashSet、LinkedHa…...
C#委托介绍
委托可以将方法作为参数传递,同时委托也可以自己作为参数传递 委托可分为自定义委托delegate 无返回值的Action 与有返回值的Func委托 也有匿名委托与Lamada 委托支持多播是事件的基础 用处如在分线程调用主线程的UI invoke public delegate string Say(stri…...
三网通电玩城平台系统结构与源码工程详解(三):控制台与银商权限模块设计
本篇聚焦于三网通电玩城系统中的控制台管理系统及银商权限逻辑。通过深入解构后台系统的角色分权、账目明细管理、发卡接口与日志追踪机制,本文将提供完整的权限划分方案和部分关键实现代码,为平台运维与数据安全提供坚实基础。 一、控制台整体结构概览 …...
audio 核心服务AudioPolicyService 和AudioFlinger启动流程
目录 1、audioserver启动 2、AudioPolicyService启动 3、AudioFlinger启动 audio的核心服务有两个,AudioPolicyService 和AudioFlinger他们到在audioserver一个进程中 1、audioserver启动 设备开机,系统启动时将执行 /system/etc/init/audioserver.rc…...
Android自动化功能-使用Appium获取android页面节点元素信息
一、appium安装和使用 官方网站:https://appium.io/docs/en/latest/ github地址:https://github.com/appium/appium 安装步骤: 首先需要安装node.js 安装好node.js之后使用npm安装 appium npm install -g appium appium -v # 检查安装版本…...