vue遇到ie兼容问题如何处理_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 加入以下代码(非必须)
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"]
}
}
}
总结
1、用vue 写的项目最多可以兼容到IE9 及以上版本
2、使用 babel-polyfill
3、在babel-loader中指定需要转码的第三方的ui框架、库、插件路径
4、配置 .babelrc文件
vue遇到ie兼容问题如何处理_vue 兼容IE报错解决方案相关推荐
- vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
- vue 兼容IE报错解决方案
vue 兼容IE报错解决方案 参考文章: (1)vue 兼容IE报错解决方案 (2)https://www.cnblogs.com/candymanping/p/10195377.html 备忘一下.
- vue 检测ie版本_分析vue 兼容IE报错解决方案
这篇文章主要为大家详细介绍了分析vue 兼容IE报错解决方案,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! IE 页面空白 报错信息 [图片暂缺 ...
- Vue工程报错解决方案Warn:import Vue from “vue“;
Vue工程报错解决方案Warn:import Vue from "vue"; 参考文章: (1)Vue工程报错解决方案Warn:import Vue from "vue& ...
- 【无标题】react umi项目在谷歌,火狐,360极速模式打开正常,360兼容模式打开页面空白,报错SCRIPT1002:‘语法错误’,SCRIPT1003: 缺少 ‘:‘
react umi项目在谷歌,火狐,360浏览器极速模式打开正常,360浏览器兼容模式报错SCRIPT1002:'语法错误',SCRIPT1003: 缺少 ':' 试了很多种办法: 适配babel-c ...
- Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法
问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法...
data里面做了定义 在方法里面进行赋值 用 this.info = repos.data 数据可以请求到,但是会报错 TypeError: Cannot set property 'listgrou ...
- windows安装vue脚手架(vue-cli)及vue ui无反应,npm i -g @vue/cli报错解决方案
首先去node.js官网下载系统对应的node.js版本. 安装完成之后,在命令行下,输入 node -v及npm -v检查node和npm(node自带npm)安装是否成功. 安装全局的cli.在命 ...
- Vue 打包后打开为空白页面 并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’
当我们开发完成后进行 npm run build打包后形成dist文件 我们通过访问dist文件中的index,会出现空白页面什么都不显示的问题,控制台中还会报'Failed to load reso ...
最新文章
- SpringBatch 多线程(TaskExecutor)启动Job详解 (七)
- 软件工程与项目管理的关系_软件工程:软件工程概述13个问题解答?
- nda协议_如何将NDA项目添加到您的投资组合
- python 函数 类 模块
- ADO.NET与抽水的故事 系列三——抽水机—Command
- javascript在使用时要注意的东西
- 两片关于NAND FLASH的好博客
- 【解决】速达服务启动失败,文件无效
- 某企业ERP实施WBS分解
- 常见的搜索引擎蜘蛛有哪些
- 8086中寻址方式详解
- 如何利用区块链技术保护知识产权
- 沧桑,何尝不是一种美丽 ----红尘一笑
- 关于临时HY学长被安排拉二分题不想翻译找到DYM学长这件事(三)
- 微信小程序-猜拳小游戏
- Python - Python3 编程第一步 Fibonacci series: 斐波纳契数列
- 知道你的成绩单是怎么打印的吗?超长Excel表格1页打印,拯救A4纸
- English digest
- 艾媒咨询:2015年度中国智能路由器市场监测报告
- python thinker_Thinker