vue3 兼容低版本浏览器Chrome、IE、Firefox

vue3 兼容低版本浏览器Chrome、IE、Firefox

低版本浏览器不能正常访问浏览器，需要将项目中的 ES6 语法转 ES5 语法

1、安装 babel-polyfill插件

	npm i babel-polyfill
	npm install --save-dev @babel/core @babel/preset-env core-js @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill

2、vue.config.js 中添加以下代码

chainWebpack: config => {
  config.entry('main').add('babel-polyfill')
  config.entry.app = ['babel-polyfill', './src/main.js']
}

3、在根目录下新建 .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "ie >= 11",
            "chrome >= 60",
            "firefox >= 54",
            "safari >= 10",
            "opera >= 48"
          ] // 这里设置你支持的浏览器范围
        },
        "useBuiltIns": "entry", // 使用core-js的入口点
        "corejs": 3 // 这里指定core-js的版本，需要与安装的版本匹配
      }
    ]
  ]
}

4、新建babel.config.js文件中配置

module.exports = {
  presets: [
    [
      "@vue/app",
      {
        useBuiltIns: "entry",
        polyfills: ["es6.promise", "es6.symbol"],
      },
    ],
    [
      "@babel/preset-env",
      {
        modules: false,
        useBuiltIns: "entry",
        corejs: 2,
      },
    ],
  ],
};

5、vue.config.js （新增）配置 transpileDependencies

  transpileDependencies: [
    'element-plus', 'js-cookie', 'vxe-table', 'xe-utils','vue-virtual-scroll-list','vue-socket.io'
  ],