vue项目兼容IE浏览器的配置（配置browserslist目标浏览器表）

1、背景

• 背景：vue项目在IE浏览器访问不了，在其他浏览器是可以访问的
• 实现：在package.json中配置目标浏览器列表 或者 在根目录新建.browserslistrc 文件进行配置（确保项目中有babel-polyfill）
• 踩坑：vue3项目是不支持IE浏览器访问的，注意项目需要为vue2项目

2、实现代码

• package.json

{
  "name": "test1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  // 这里是配置的代码====start
  "browserslist": [
    "> 1%", // 代表全球超过1%使用的浏览器
    "last 2 versions", // 最后的2个版本
    "Firefox >= 80", // 指定浏览器的版本范围
    "Chrome >= 80"
  ]
  // 这里是配置的代码====end
}

• 或者 在根目录新建.browserslistrc 文件

> 1%
last 2 versions
Firefox >= 80
Chrome >= 80

3、browserslist介绍及语法

• 介绍

  browserslistrc 是在不同的前端工具之间共用目标浏览器和 node 版本的配置文件，是用来指定项目所支持的浏览器范围的配置文件。

  在前端开发中，我们需要考虑不同的浏览器对于网页的兼容性，因此需要在开发过程中指定需要支持的浏览器范围。 它主要被以下工具使用：

  Autoprefixer
  Babel
  post-preset-env
  eslint-plugin-compat
  stylelint-unsupported-browser-features
  postcss-normalize
  

• 语法

例子	说明
> 1%	全球超过1%人使用的浏览器
>5% in US	指定国家使用率覆盖
last 2 versions	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR	火狐最新版本
Firefox > 20	指定浏览器的版本范围
not ie <=8	方向排除部分版本
Firefox 12.1	指定浏览器的兼容到指定版本
unreleased versions	所有浏览器的beta测试版本
unreleased Chrome versions	指定浏览器的测试版本
since 2013	2013年之后发布的所有版本