ant-design-vue的兼容问题

ant-design-vue的兼容问题

问题：ant-design-vue不兼容ie浏览器

要求：ie兼容 >= 9

环境：vue cli3搭建项目，ant-design-vue@1.3.8

babel.config.js文件

module.exports = {
  presets: [
    '@vue/app',
    // 兼容配置
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry'
      }
    ]
  ],
  // 按需加载配置
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css'
      },
    ]
  ]
}

main.js文件（项目入口）

// 引入@babel/polyfill处理兼容 
import '@babel/polyfill'

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'
import './plugins/antd.js'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第二种方法：（比较麻烦，推荐第一种）

babel.config.js文件

module.exports = {
  presets: [
    '@vue/app',
    // 兼容配置，
     {
      // 要写全所有项目中需要兼容的,参考https://github.com/zloirock/core-js
      polyfills: [
        'es6.promise',
        'es6.symbol',
        'es.object.values'
      ]
    }
  ],
  // 按需加载配置
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css'
      },
    ]
  ]
}

项目地址

注意事项

很多人说按照步骤操作还是有问题，主要是因为脚手架生成的项目中@vue/cli-service和@vue/cli-plugin-babel版本高了（4.0以上），使用了Babel 7处理，所以本文针对项目中他们的版本要低于4.0才可以。

如果高于4.0请参考下面链接

ant-design-vue的兼容问题2