vue2.5.2 在ie11打开空白的解决方法

1.ie10下加载报错

解决方法:

1. cnpm安装babel-polyfill

  cnpm install --save-dev babel-polyfill

2. 在入口文件main.js中倒入:import 'babel-polyfill'

3. 如果也是用了官方脚手架vue-cli,还需要在build文件夹下的webpack.config.js配置文件中做各修改,用

module.exports = {

  entry: {

    app: ["babel-polyfill", "./src/main.js"]

  }

};

替换

module.exports = {

  entry: {

    app: './src/main.js'

  }

}

 

2.另外,

这个问题的也是利用上述方法解决

3.但如果已经安装并配置babel-polyfill,页面还是空白,且ie11下无报错信息。

解决问题的思路:打开ie仿真,将版本切换到ie10,

查看报错信息:

是关于swiper的报错信息,最后发现是swiper版本的问题,最新的swiper4在ie中显示就是会出问题,将版本降到3.4.2就可以显示了,(降版本的方法:cnpm install --save-dev swiper@3.4.2 )

 vue项目查看插件版本的方法:根目录下的package.json

 

转载于:https://www.cnblogs.com/duanzhenzhen/p/11357034.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,如果打包后在IE11中出现空白的问题,可能是因为Vue使用了一些ES6的语法特性,而IE11不支持这些特性。为了解决这个问题,有几个步骤可以尝试: 第一步,将你的项目中使用的所有ES6语法特性转换为ES5语法。你可以使用Babel来将代码转换为IE11可以理解的语法。 第二步,检查是否在Vue项目的package.json文件中添加了"browserslist"字段。如果没有,你可以在根目录下创建一个.browserslistrc文件,并在其中添加下面的内容: ``` > 0.2% ``` 这会告诉Babel将代码转换为兼容绝大多数浏览器的语法。 第三步,在项目的webpack配置文件中,针对IE11做一些特殊处理。你可以添加一个新的entry point,用来引入polyfill和其他必要的库,以兼容IE11。然后将这个entry point添加到你的webpack配置文件中。 第四步,使用Vue的官方polyfill库,它可以解决一些IE11中存在的兼容性问题。你可以在入口文件中添加以下代码来引入polyfill: ``` import 'core-js/stable'; import 'regenerator-runtime/runtime'; ``` 第五步,确保你的Vue代码中没有使用未被IE11支持的CSS特性。这些特性可能会导致在IE11中出现空白的问题。你可以尝试在Vue组件中逐个禁用一些CSS样式,看看是哪些样式导致了问题。 总的来说,解决Vue打包后在IE11中出现空白的问题需要一些细致的排查和处理,上述步骤可以作为参考,但具体的解决方法可能根据你的项目配置和代码结构而有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值