webpack创建的vue项目在IE中打开空白

最新推荐文章于 2023-05-26 20:21:14 发布

原创最新推荐文章于 2023-05-26 20:21:14 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue.js #javascript

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

兼容性

3 篇文章

订阅专栏

本文介绍了在项目开发中遇到的IE浏览器兼容性问题，特别是针对ES6语法和Swiper组件的不兼容。通过引入babel-polyfill，修改Webpack配置，并针对不兼容的库进行特殊处理，最终成功解决了IE浏览器下页面空白的问题。详细步骤包括npm安装polyfill，main.js引入，以及Webpack配置文件的调整，特别提到了将Swiper及相关依赖添加到babel-loader的include列表中。

公司的项目正常开发的时候一直用的chrome，没什么问题，最后部署后，发现项目在ie浏览器中打开空白

控制台报缺少 " ) " ；无法获取未定义或 null 引用的属性 “call”

通常处理办法 是
1、npm i --save babel-polyfill

2、在main.js中引入 import “babel-polyfill”

3、在webpack.base.conf.js 中替换为 app: [“babel-polyfill”, “./src/main.js”]

一般这样就可以解决ie不兼容es6的问题了

但是！

我遇到的项目这样处理后依然无法正常显示，在经历上下而求索之后，发现项目中的swiper不兼容ie

于是做这样的操作

注意在webpack.base.conf.js 中

{
  test: /\.js$/,
  loader: "babel-loader",
  include: [
    resolve("src"),
    resolve("test"),
    resolve("node_modules/webpack-dev-server/client"),
    /* 下面是 我自己加的 不兼容的依赖 */
    resolve("node_modules/swiper"),
    resolve("node_modules/dom7"),
    resolve("node_modules/ssr-window")
  ]
},