Cli项目兼容ie9及以上浏览器

 

        最近翻看原来的代码，发现在ie浏览器下出现空白，心里想着ie虽然份额在减少，但是技术上能解决当然最好了，于是开始检查配置文件，发现配置文件已有

babel-polyfill

要解决ie兼容性问题，单单有babel-polyfill还不行，还需要babel-loader、@babel/core、 @babel/preset-env

安装：npm install -D babel-loader @babel/core @babel/preset-env webpack

        默认情况下 babel-loader 会忽略所有 node_modules 中的文件，相当于以下配置

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
}

        如果开发过程中使用的第三方组件，如vuex-persist在ie下存在兼容性问题，我们则需要单独处理

       在cli2项目中你可以修改webpack.config.js的loader来解决

module: {
  rules: [
    ...
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('node_modules/vuex-persist')]
    }
  ]
}

        在cli3项目中可以采用添加transpileDependencies: ['vuex-persist'] 配置来解决，最后，你还需要在cli3项目需在babel.config.js文件中、cli2项目则需在.babelrc 文件中，添加如下代码presets: ['@babel/preset-env']。

        由于 Babel 只转换语法(如箭头函数)， 你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法等

        在main.js文件中引入：import 'babel-polyfill'

        至此ie9及以上浏览器的js兼容性都已经解决了，打开页面已经不报错了，有些第三方组件如果存在ie兼容性问题，则按照上面处理vuex-persist方式处理即可；当然页面布局在ie9下尤其是css display：flex会存在样式兼容性问题，在ie10，ie11则不存在，暂时还没发现有更便捷的方式来解决。

以下是我cli3项目中部分package.json

"devDependencies": {
    "@ant-design/colors": "^3.1.0",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-unit-jest": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.11.0",
    "babel-polyfill": "^6.26.0",
    "compression-webpack-plugin": "^3.0.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "vue-svg-icon-loader": "^2.1.1",
    "vuex-persist": "^1.8.0",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.34.0",
    "webpack-theme-color-replacer": "^1.2.15"
  }

参考了以下兄弟写的文章

https://www.jianshu.com/p/d971bffff546

https://blog.csdn.net/Maggie_01/article/details/101159448

https://blog.csdn.net/weixin_34353714/article/details/91422087