- 公司项目用vue写需要兼容IE浏览器,我最近做的两个项目在IE11中都是一片空白,一个是用webpack初始化的,另一个使用vue脚手架初始化的。
- 1、用webpack初始化的这个项目在IE打开一片空白,且中报错如下图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/582bc538942b4c04803817d3a7dfc113.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2h1bmNodW5fSA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
一般情况下IE浏览器打开页面空白是js没有加载成功,报错 script1003,根据报错信息定位到是封装的一个组件直接引用了element依赖的ji,而在打包的时候报node_modules的element的js是忽略的,默认下载的是转了ES5后的。 - 方法1:可以在webpack配置中把报错的js文件再次转ES5。
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client'),
resolve('node_modules/element-ui/src'),
resolve('static'),
],
},
- 方法2:有可能用了方法1之后还是要报错,简单粗暴的解决方案就是直接重新写这个组件,不去用依赖包里面的js。
- 2、用vue脚手架初始化的项目IE11打开一片空白,且报错SCRIPT:1006,这个根据报错信息也是定位到某个js文件,我项目中报错的这个js文件是下载的插件,这时候修改打包配置,亲测有效。
- 在vue.config.js中
![在这里插入图片描述](https://img-blog.csdnimg.cn/78996d7b65b14ee8922aba8eac6d5672.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2h1bmNodW5fSA==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)