vue-cli3配置IE浏览器兼容性
前端  /  管理员 发布于 5年前   470
最近,在重构公司官网,需要兼容ie9/10/11,使用vue-cli构建项目。在查询如何兼容ie时,首先是查看vue cli官网,浏览器兼容性,感觉官网说的不是太明晰(小白一枚,实在不太懂),然后就直接百度了,网上方法基本类似,都是用 browserslist,babel-polyfill等,只是具体步骤有差异,不过 都没有解决本人问题。经过层层查询,逐步对vue-cli 原理了解后,网上查询方法结合本人理解,将问题解决,在此记录下。
先说步骤,然后说一些自己浅显理解。
配置这一项,有两个途径,一是 在 package.json文件中,添加browserslist字段;二是 在项目根目录,创建一个.browserslistrc文件,两种途径。这两种方法不能同时配置,不然运行serve命令会报错。
先说package.json中配置,网上很多如下方法:
"browserslist": [ "> 1%", "last 4 versions" ]
本人依此配置,报错!然后按照另外一种配置,如下:
"browserslist": [ "ie 11" ]
成功!
额外贴出.browserslistrc方法配置方式(只是列出书写方式,代码有效性,按上面来):
> 1%last 4 versions
这个简单,直接 npm i babel-polyfill --save-dev即可
3.引入babel-polyfill依赖
这一步是关键,网上查询很多,在main.js中,import babel-polyfill引入,本人测试后无效。
具体引入是在vue.config.js中configurewebpack字段中,具体:
configurewebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; }
即在webpack入口配置中,加入babel-polyfill。至此,在ie下,兼容es6就解决了!
上面把问题解决了,再将自己解决过程中的理解梳理下。
1.首先上面的解决步骤,仅仅适用于源码(/src),对依赖包无效。当需要对依赖包做兼容转译时,就需要用到官网中Polyfill部分内容了
2.vue-cli中webpack配置文件是在node_modules中的,没有直接在根目录,要想配置webpack,需要在vue.config.js中configureWebpack字段或者chainWebpack配置。具体如下:
module.exports = { configureWebpack: { resolve: { alias: { querystring: 'querystring-browser' } } }}
module.exports = { chainWebpack: config => { config.resolve.alias.set('querystring', 'querystring-browser') }}
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号