vue 项目兼容IE浏览器和360浏览器

vue 项目兼容IE浏览器和360浏览器

vue 项目在IE浏览器和360兼容模式显示空白解决方法

1. 安装 babel-polyfill

  模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器.

  安装: npm install babel-polyfill --save-dev

  配置:

    main.js   在最顶部添加,确保全面加载

      import 'babel-polyfill'

    webpack.base.conf.js 中

      app入口添加 "babel-polyfill":

      module.exports = {

        entry: {

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

        }

      }

2. 安装 es6-promise

  解决 ES6 promise 对象兼容问题.

  安装: npm install es6-promise --save-dev

  配置:

    main.js 在'babel-polyfill'后引入,即:

      import 'babel-polyfill'

      import promise from 'es6-promise'

      promise.polyfill()

3. 安装 babel-preset-es2015

  将ES6转为ES5语法.

  安装: npm install babel-preset-es2015 --save-dev

  在项目的根目录下，添加.babelrc文件

  .babelrc 添加内容

    {

      "presets": ["es2015"]

    }

4. 安装 classlist-polyfill

  支持ie9以及以下浏览器的元素添加classList属性.

  安装: npm install classlist-polyfill --save-dev

  配置:

    module.exports = {

      entry: { app: ['classlist-polyfill', 'babel-polyfill', './src/main.js']}

    }

参考文章:https://blog.csdn/qq_24985715/article/details/93764818

因为大家的环境，装的依赖，用的组件等等都不相同，导致遇到的情况可能不一致.我的项目里面没有用到classList,安装了前面三个插件就适配成功了,第四个插件没有使用过,不过刚好看到了,记录下来以便以后参考.