没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Vue+iview+webpack ie浏览器兼容简单处理浏览器兼容简单处理
主要介绍了Vue+iview+webpack ie浏览器兼容简单处理,文中通过示例代码介绍的非常详细,对大家的学习或
者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
环境介绍:环境介绍:
vue: ^2.5.2
iview: ^3.1.0
Webpack: ^3.8.1
前情提要:前情提要:
ie 浏览器不支持 ES6 Promise 的语法。
ie8 及以下对 html5 标签不兼容(可以通过引入html5shiv包解决,本文不处理IE11的更低版本,故不提及此法)。
ie9 以下 对 CSS3 的不兼容,各种不兼容的细节比较多,这里不说明。
ie10 及以下浏览器中不支持 dataset 方法(经学习实践发现ie11也是不支持的),而我在项目中使用了 iview, iview 的一
些组件用到了这个方法。
ie 浏览器是非 webkit 内核,不支持 display: -webkit-box; 和相关样式;
Polyfill 是 shim 的一种,但他的 API 是遵循标准的。polyfill 的做法通常是:先检查浏览器是否支持某个标准 API,如果不
支持,就使用旧的技术对浏览器做兼容处理,这样就可以在旧的浏览器上使用新的标准 API。比如,旧浏览器不支持 ES6 的
Array.prototype.find 方法,我们想要在项目中使用 Array.prototype.find,只要 polyfill 就行了,而不是封装一个新的方法。
处理过程处理过程
1、安装、安装 polyfill 组件,使浏览器兼容组件,使浏览器兼容 es6 的写法的写法
在终端输入命令
npm install --save babel-polyfill
main.js 头部引入 babel-polyfill, 注意这个放最前面:
import 'babel-polyfill'
或者在项目的 webpack.base.conf.js 中配置:
entry: {
app:['babel-polyfill','./src/main.js']
},
另外,引入的一些模块需要单独引入到 babel 的配置中,不然不起作用(具体为啥我没深究),网上查到用到 echarts-v3 的
需要配置,经测试我用到 iview 也是要配置的, 下面代码的 include 中就是我配置的项,这个主要是按需配置的,具体看项目里
的情况:
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
资源评论
weixin_38638163
- 粉丝: 3
- 资源: 975
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功