antd vue适配ie浏览器中出现的若干问题

最新推荐文章于 2023-11-01 19:43:03 发布

原创最新推荐文章于 2023-11-01 19:43:03 发布 · 967 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍了在vue项目中，针对antd vue组件库进行IE浏览器适配的过程，包括在package.json中添加依赖，修改vue.config.js和babel.config.js配置。在适配过程中遇到的问题包括第三方插件的es6语法不兼容、部分第三方依赖报错以及ant-design-vue样式的失效，这些问题的解决方案也一并进行了分享。

因为vue项目上用户有ie浏览器的使用需求，因此适配了ie浏览器，在适配的过程中遇到了一些问题，分享一下。

一、antd vue适配ie

1.package.json中添加依赖：

“@babel/runtime”: “^7.14.6”,
“@babel/runtime-corejs3”: “^7.14.7”,
“babel-polyfill”: “^6.26.0”,

2.修改vue.config.js

在这里插入图片描述

// 添加transpileDependencies配置属性，按需添加需要编码的内容
transpileDependencies: [
    'ant-design-vue',
    'crypto-js',

3.修改babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    // 兼容配置
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
        helpers: true,
        regenerator: true,
        useESModules: false
      }
    ],
    // 按需加载
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

二、适配过程中存在的问题

1.系统中部分功能有问题
原因是项目中用了部分第三方插件，对应的代码是放在了public/plugins下，这部分的代码并不会压缩，所以其中的es6语法在ie上还是会有问题，需要单独处理
2.部分第三方依赖报错
解决方式：在适配第2步中找到存在问题的依赖，添加到transpileDependencies属性中
3.antd vue样式不生效
将babel.config.js中plugins属性下ant-design-vue的style设置为true