关于Vite项目打包后浏览器兼容性问题的解决方案
一、问题描述
vite+vue3项目开发完以后,你会发现打包后的项目运行在新版浏览器可以正常显示,但运行在一些版本比较老的浏览器如 Chrome < 23、Firefox < 21和IE等浏览器上时显示一片空白,并且没有任何的错误提示。
二、问题分析
此时你的大脑可能跟页面一样也是一片空白,但是不要慌,我们先分析一下产生这个问题的可能的原因:那些版本较低的浏览器不支持ES6的语法和新API,而Babel默认只转换新的JavaScript句法,不转换新的API,比如Proxy、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法都不会转码。
三、解决方案
Plan A:在vite.config.js中配置浏览器的兼容性。
我们项目是用vite搭建的,因此我首先想到了使用vite自带的API去配置浏览器兼容性。
配置build.target和buid.cssTarget
build: {target: ['chrome52'],cssTarget: ["chrome52"],}
打包并运行到浏览器后发现还是一片空白,查看打包生成的文件,发现里面依然有const、Promise等新语法和API,并没有为我们转换。Plan A ,No.
Plan B:先配置TypeScript转换语法,然后再让vite兼容目标。
在tsconfig.json文件内配置target为”es5”,然后开始打包。
打包时报错:error: Transforming const to the configured target environment (“es5”) is not supported yet
错误信息大抵在告诉我们:代码中有const等目标环境不支持的语法,并且它目前还不支持将const转换为目标环境"es5"。嗯这就有点意思了。Plan B, NO.
Plan C:引入babel-polyfill环境垫片
上面转换语法的方案失败后,我尝试给浏览器环境请一个外援:babel-polyfill,让它来做那些低版本浏览器环境做不到的事情。
什么是polyfill?官方的解释是:“用于实现浏览器不支持原生功能的代码”,我们可以简单理解为polyfill可以在当前运行环境中模拟出那些当前环境不支持的API,它为我们的当前环境提供了一个垫片,我们可以在这个垫片上使用新API。
·首先我们先安装babel-polyfill:
npm install --save babel-polyfill
·然后在main.js里引入它:
import ‘babel-polyfill’
然后我们重新打包、启动、运行到浏览器,有些伙伴到这一步可能就成功了,但我的仍然是一片空白!
慌不慌?你说慌不慌,慌!我也觉得慌,为什么?网上那么多人用这个方法成功了,但我们失败了,这能不慌? Plan C,No!
Plan D:使用@vitejs/plugin-legacy插件
以上三个方案失败后,我又重新回归到vite这一块,在vite官方文档中我找到了vite自带插件库,并且在插件库中找到了一个关于浏览器兼容支持的插件:@vitejs/plugin-legacy
·首先安装插件:npm i @vitejs/plugin-legacy -D
·然后在vite.config.js中配置
import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {plugins: [legacyPlugin({targets:['chrome 52'], // 需要兼容的目标列表,可以设置多个additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件})]
})
·打包、运行到浏览器。
新版本浏览器运行正常!旧版本浏览器运行正常!Plan D,yes!
以下是@vitejs/plugin-legacy插件的简单介绍:
插件默认行为:
1.使用@babel/preset-env转换,为包中的每个块生成相应的遗留块。
2.生成一个包含 SystemJS 运行时的 polyfill 块。
3.使用
打包后的变化:
启用插件后打包完成的目录多出了一些带有legacy字样的文件,每个js脚本文件都有一个与其对应的遗留版本。
html文件中新增了一些脚本,这些脚本根据浏览器的支持程度来动态的引入正常版本文件还是带有legacy字样的遗留版本文件。
此时当项目运行在一些版本较低的浏览器时,插件添加的脚本会自动加载legacy版本的文件。
四、过程中遇到的其他问题
在Plan D成功在低版本浏览器运行以后,发现有一些CSS样式显示不正常,随后确认是重写Vant的CSS变量没有生效。
刚开始认为是CSS在打包时没有做好兼容处理,然后就折腾了一番CSS的兼容支持。css解释器、postcss插件和vite配置css目标环境都没用。
后面就没有什么思路了,后来想起来在vite.config.js配置中有一个关于样式按需加载的插件:
此时就想是不是这个插件影响到了我的CSS的正常效果,当我把它移除并重新打包运行后,样式就回归正常了,看来确实是被它影响的。
使用这个按需加载的插件后,当页面加载时,它会根据它的一些规则去判断当前需要加载哪些样式文件,哪些不需要加载。在加载这些样式文件时,如果样式文件里有我们自定义全局样式重名的,那么根据css规则,我们自定义过的全局样式会被覆盖掉。
在本次的案例中,我们重写了Vant组件的部分变量,并全局引入了。在打开包含这些变量的页面时,按需加载插件此时才会加载Vant的样式文件,我们在全局重写的变量又被重写了,因此重写的全局变量没有生效。
关于Vite项目打包后浏览器兼容性问题的解决方案相关推荐
- vue 项目打包后 浏览器 F12 在source 下不显示 webpack 包
vue 项目打包后 浏览器 F12 在source 下不显示 webpack 包,度娘上好多说的是 在 vue.config.js 配置 productionSourceMap: false 即可,然 ...
- vite项目低版本浏览器兼容性问题
技术:vite+vue3.2+ts+vant 1.这个是还没打包的实现: 先说下问题: app内置的浏览器内核版本太低,导致用app内置浏览器打开,会出现白屏,引入vconsole调试了一下,发现一个 ...
- (javascript)vue项目打包后,写的覆盖element的样式无效了。这是什么原因?
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了.这是什么原因?描述: 在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因? main.js里的c ...
- vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址 问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
- Vue项目打包后js文件压缩
前言 这段时间因为免费试用了https://free.aliyun.com/一台阿里云的服务器,配置是 2核4G 2M, 因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加 ...
- Vue项目打包后不能正常显示页面
项目场景: 通过 Vue CLI 创建的 vue 项目,编写完项目后,通过 npm run bulid 对项目进行打包,再把打包得到的内容(dist文件夹)交给后端部署到服务器上. 问题描述: 对 v ...
- 解决Spring的java项目打包后执行出现“无法读取方案文档...“、“原因为 1) 无法找到文档; 2) 无法读取文档; 3) 文档的根元素不是...”问题
解决Spring的java项目打包后执行出现"无法读取方案文档..."."原因为 1) 无法找到文档; 2) 无法读取文档; 3) 文档的根元素不是..."问题 ...
- vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm ru ...
- php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
最新文章
- MESSL(maven + extjs + spring portlet mvc + spring web flow + liferay )整合架构 1
- Cobbler体验小记
- 谨慎使用Hibernate中的本机SQL
- Canvas动画 位图缓存提高效率和对应的内存问题
- python语言变量随时命名随时赋值_Python变量及数据类型用法原理汇总
- ReiBoot Pro for Mac(iOS系统修复软件)
- 【系列4】使用Dockerfile创建带tomcat的Centos Docker镜像
- Java注解@PostConstruct使用及相关原理分析
- Python网络爬虫实战-李强强-专题视频课程
- 计算H时M分S秒以后是_关于工程量计算-深圳工程量计算培训
- 看设计师大牛如何将用户体验与建站融会贯通
- android 手机 apk安装失败对应码
- 快慢指针(java)
- 三星电容封装料盘注解
- Winform + Devexpress 实现看板效果
- 云服务器、VPS、虚拟主机三者的区别(详细)
- MRT转换工具下载与安装以及使用
- 机器人学——姿态描述方法(欧拉角,固定角,D-H法,绕定轴旋转)
- 第2章KNN算法笔记_函数classify0
- 19美亚个人赛复盘2(手机取证)