html中使用VUE时IE不兼容,vue2.x遇到ie11不兼容的坑

有个b端项目，使用vue2.x搭建，在ie11 浏览器打开网页显示空白，控制台提示'语法错误'、'不支持defineProperty...'、'无法获取未定义或 null 引用的属性“call”'等等。

不支持defineProperty...

这个问题可能是浏览器仿真模式选了 ie9 以下版本，纯属失误。

解决方法：设置成ie11

无法获取未定义或 null 引用的属性“call”

查看报错信息，查找错误出处，项目中使用了 muse-ui、muse-ui-progress，muse-ui是基于bootstrap的，所有上面报错提示了bootstrap。

Vue使用了ES6语法，而IE浏览器不支持，需要将es6转成es5，项目中已经按照了muse-ui官网配置了.babelrc，不兼容ie的话，那就不用muse-ui。

解决方法：卸载muse-ui

兼容ie

1、安装插件babel-polyfill

npm install --save-dev babel-polyfill

2、在main.js引入

import 'babel-polyfill'

3、配置webpack.base.conf.js

module.exports = {

context: path.resolve(__dirname, '../'),

entry:{

app:'./src/main.js'

}

改成：

module.exports = {

context: path.resolve(__dirname, '../'),

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

}

语法错误

查找错误出处，看控制台调试程序，发现node_modules/swiper报错，swiper5不兼容ie11。

安装兼容ie的版本swiper@3.4.2。

npm install --save-dev swiper@3.4.2

不建议使用npm安装swiper@3.4.2，建议下载到本地，头部引入js文件和css文件。

解决方法：卸载swiper5，组件内清除干净swiper的引入，包括css。下载swiper@3.4.2，头部引入方式引入js和css。

html中使用VUE时IE不兼容,vue2.x遇到ie11不兼容的坑相关推荐

【vue开发问题-解决方法】（一）在style中设置background-image时路径问题
[vue开发问题-解决方法](一)在style中设置background-image时路径问题参考文章: (1)[vue开发问题-解决方法](一)在style中设置background-image时 ...
vue项目中使用vant时tabbar遮挡页面解决方法
标题vue项目中使用Vant时tabbar遮挡页面解决方法单页面使用: 页面底部可以增加一个div,<div style="height: 5rem;"></d ...
Vue中失去焦点时所触发的事件
Vue中失去焦点时所触发的事件 1-html.失去焦点 <input type="text" onBlur="txtblur()"> <scr ...
在 Visual Studio Code 中使用 Vue
Vue.js是一个流行的 JavaScript 库,用于构建 Web 应用程序用户界面,Visual Studio Code 内置了对HTML.CSS和JavaScript的 Vue.js 构建块的支 ...
bug修复录-qq浏览器中post请求时body为空
近期项目中遇到一个bug,其中解决过程比较有意思,特此记录下来.有一天看到报警记录有一个500服务端的错误,量很少,一周都不一定有一个,先根据服务器里的本地日志拿到了当时请求的相关信息像UA.cook ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
vue.js视频课程_在此免费课程中学习Vue.js！ ✨
vue.js视频课程 by ZAYDEK 由ZAYDEK 在此免费课程中学习Vue.js! ✨ (Learn Vue.js in this free course! ?✨) 让我们做点Vueseful ...

html中使用VUE时IE不兼容,vue2.x遇到ie11不兼容的坑

html中使用VUE时IE不兼容,vue2.x遇到ie11不兼容的坑相关推荐

最新文章

热门文章