Vue3 + Typescript 兼容低版本 Chrome

本文介绍如何解决Vue3+Typescript项目在Chrome 49等低版本浏览器中出现白屏的问题。通过修改.browserslistrc配置、调整Vue配置以及修改main.js,实现了对旧版Chrome的兼容,无需用户升级浏览器。
摘要由CSDN通过智能技术生成

最近新开一个项目,使用了最新的Vue3和Typescript,但发现在客户浏览器中白屏(空页面),得知他们使用的浏览器版本居然是Chrome 49,但客户太多,根本无法要求他们统一更换新版本的浏览器,只能考虑适配这种低版本的浏览器。
一般这种情况都需要通过Babel去做转换,我们是Vue3 Cli项目,实际上Vue项目在创建时就引入的Babel,直接使用即可

修改浏览器兼容列表配置(.browserslistrc)

项目根目录下有一个.browserslistrc文件,打开,通过井号注释掉原先的内容,改为:

# 最低兼容 chrome 48
chrome >48

修改Vue配置

我们的项目所依赖的npm包实际上也可能需要转意,因此修改为:

module.exports = {
   
  // 表示babel在翻译时一起把node_mod
  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值