vue2.0的一次IE11兼容问题记录

最新推荐文章于 2024-08-06 14:05:31 发布

奕可的戴迪

最新推荐文章于 2024-08-06 14:05:31 发布

阅读量1.1k

点赞数

分类专栏： vue开发文章标签： vue javascript node.js es6

本文链接：https://blog.csdn.net/l4481259k/article/details/108827692

版权

本文记录了Vue2.0项目在IE11上遇到的兼容性问题，包括页面无法打开、路由跳转失败及报错信息。通过F12调试，发现问题主要在于JavaScript语法不兼容。解决方案是调整.babelrc配置，启用`useBuiltIns`并设置目标浏览器，同时修改webpack.base.conf.js，针对特定第三方组件添加解析路径。最终成功使项目在IE11中正常运行。

摘要由CSDN通过智能技术生成

vue2.0的一次IE11兼容问题记录

问题描述：
1.项目刚开始的时候IE查看没有什么问题。
2.随着项目的不断扩大，使用的第三方组件等工具方法不断增加。忽然的就发现，打包后的项目无法在IE11上正常查看了。而且最要命的就是客户的seo无法实现，必须要在ie上能打开。
下面就是解决的过程：
1.使用本地dev在ie上正常显示，build后的包到环境上页面无法打开，连路由都跳转不过去。
2.没办法，只能F12查看报错信息。坑爹的IE页面有问题，F12都打开的非常艰难，试了半天才能看到报错信息：
DOM7011: 此页上的代码禁用了反向和正向缓存
HTML1300：进行了导航
app.js 各种语法错误
3.网上查看了各种信息，项目之前就引入了babel-polyfill组件，通过网上和代码的实际情况分析，觉得还是ie无法兼容当前的js，所以重点分析了babel-loader这个东东，测试了很多网上的方法，最终能正常显示，又测试了下把一些认为无效的内容删除在测试，最终修改了两个文件的内容。
.babelrc文件修改为以下内容。
{
“presets”: [
[“env”, {
“useBuiltIns”: “entry”,
“targets”: {
“browsers”: ["> 1%", “last 2 versions”, “not ie <= 8”]
}
}],
“stage-2”
],
“plugins”: [“transform-vue-jsx”, “transform-runtime”],
“env”: {