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

不支持defineProperty...

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

b4c59657747d0745ff5f8ffe893133a8.png

解决方法:设置成ie11

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

1a4494af4f61aac893ec2449727b5a97.png

29a34f09ee81ea5c26a45e226ef69ccc.png

7ffc06364bbd9aed4ac9ea09e39c0ad6.png

查看报错信息,查找错误出处,项目中使用了 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"]

}

语法错误

8fec0773e3974737f4d2e4216b0e5b5d.png

查找错误出处,看控制台调试程序,发现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。

Logo

前往低代码交流专区

更多推荐