详解vue 兼容IE报错解决方案
ie 页面空白
报错信息
此时页面一片空白
报错原因
babel 默认只转换新的 javascript 语法(如箭头函数),而不转换新的 api ,比如 iterator、generator、set、maps、proxy、reflect、symbol、promise 等新的对象或者方法。
例如 promise 、新的原生方法如 string.padstart (left-pad) 等。为了解决这个问题,我们使用一种叫做 polyfill(代码填充,也可译作兼容性补丁)的技术。
简单的说,兼容问题一般是ie 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-polyfill 来正常使用es6。
polyfill 是什么
举个例子,有些旧浏览器不支持 number.isnan方法,polyfill就可以是这样的:
if(!number.isnan) { number.isnan = function(num) { return(num !== num); } }
polyfill就是类似这样解决api的兼容问题
解决方案
1、使用babel-polyfill
引入 babel-polyfill
npm i -s babel-polyfill
如何使用
使用它时需要在你应用程序的入口点顶部或打包配置中引入。
在main.js 引入
import 'babel-polyfill'
或者在config中的 webpack.base.conf.js中 修改配置
entry:{ app:['babel-polyfill','./src/main.js'] }
2、在index.html 加入以下代码(非必须)
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
3、babel-loader 中指定模块转码
增加了poly-fill还是报错,这一般是使用了第三方的ui框架、库、插件等,并且这些ui框架、库、插件底层有es6的语法。
找到webpack.base.conf.js 中的babel-loader
比如我这里用了element-ui 跟 v-charts 修改成如下:
{ test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/v-charts/src'), resolve('node_modules/vue-awesome'), resolve('node_modules/element-ui/packages'), resolve('node_modules/element-ui/src') ] }
4、打包问题
如果是webpack代码打包出错,一般到 github webpack issues
中可以找到答案
这个错误是因为webpack-dev-server 版本问题
5、babel 配置 .babelrc文件
.babelrc是babel的配置文件,放在项目根目录下。一般情况下.babelrc文件不需要修改,如果以上都做了,还是报错,可以看下官网文档来配置下该文件
在项目使用 vue-cli 生成的代码中,根目录有一个 .babelrc 文件。在默认生成的模板内容中,增加 "usebuiltins": "entry"
,这是一个指定哪些内容需要被 polyfill(兼容) 的设置
usebuiltins
有三个设置
- false - 不做任何操作
- entry - 根据浏览器版本的支持,将 polyfill 需求拆分引入,仅引入有浏览器不支持的polyfill
- usage - 检测代码中 es6/7/8 等的使用情况,仅仅加载代码中用到的 polyfill
{ "presets": [ ["env", { "modules": false, "usebuiltins": "entry" }], "stage-2" ], "plugins": ["transform-runtime", "transform-vue-jsx"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }
具体相关可以查看babel官网:
总结
1、用vue 写的项目最多可以兼容到ie9 及以上版本
2、使用babel-polyfill
3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径
4、配置 .babelrc文件
5、babel 是一个厉害的东西
补充:
问题:ie浏览器autoprefixer自动补全css前缀无效
解决方法:
ie发现使用内联样式,autoprefixer无法生效,所以需要写到style标签内。
问题:ie10打开包语法错误,如图所示
解决方法
点击app.js,跳转到报错的位置,如图
发现最后一行有个import的文件,所以锁定到错误肯定是在引入的这个文件内。
把common.js打开,检查语法,发现有个变量定义用了es6的语法let。所以引入的文件,插件没有起作用。
没有将es6转es5。然后修改了之后,问题解决。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
-
vue拦截器实现统一token,并兼容IE9验证功能
-
vue单文件组件lint error自动fix与styleLint报错自动fix详解
-
详解基于vue的移动web app页面缓存解决方案
-
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
-
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
-
详解vue 项目白屏解决方案
-
vue+iview 兼容IE11浏览器的实现方法
-
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
-
详解canvas.toDataURL()报错的解决方案全都在这了