ruoyi-vue2框架兼容ie浏览器到9

需求是要兼容到ie8, 然而经过我一顿百度+操作只做到了兼容ie9 记录一下，非若依框架也可以试试

我的环境 node 16

1.首先下载

yarn add babel-polyfill

yarn add es6-promise

2.在main.js里引入

import '@babel/polyfill'
import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()
Es6Promise.polyfill()

3.创建webpack.base.conf.js

module.exports = {
    test: /\.js$/,
    loader:'babel-loader',
    include: [
      resolve('src'),
      resolve('test'),
      resolve('node_modules/webpack-dev-server/client'),
    ]
  }

4.vue.config.js

transpileDependencies: ["webpack-dev-server/client"],

chainWebpack(config) {
  config.entry.app = ["babel-polyfill", "./src/main.js"];
   config.module
      .rule("compile")
      .test(/\.js$/)
      .include.add(resolve("src"))
      .add(resolve("test"))
      .add(resolve("static"))
      .add(resolve("node_modules/webpack-dev-server/client"))
      .add(resolve("node_modules"))
      .end()
      .use("babel")
      .loader("babel-loader")
      .options({
        presets: [
          [
            "@babel/preset-env",
            {
              modules: false,
            },
          ],
        ],
      });
}

大多教程到这一步就没了，但我还没成功！！！！

5.继续百度发现babel版本可能不对，把babel卸载了重新下了

yarn remove babel-core
yarn add @babel/core
npx babel-upgrade --write --install

6. babel.config.js

const plugins = [];
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
  plugins.push("transform-remove-console")
}
module.exports = {
  presets: [
    [
      "@vue/app",
      {
        "useBuiltIns": "entry",
        polyfills: [
          'es6.promise',
          'es6.symbol'
        ]
      }
    ]
  ],
  plugins: plugins
};

7. .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "entry",
        "corejs": 3,
        "targets": {
          "browsers": [
            "> 0.25%",
            "last 2 versions",
            "ie >= 8",
            "not ie < 8"
          ]
        }
      }
    ]
  ],
  "plugins": [ 
    "@babel/plugin-transform-runtime", 
    "@babel/plugin-syntax-dynamic-import", 
    "@babel/plugin-proposal-object-rest-spread",
     "transform-vue-jsx"
   ],
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-env"
      ],
      "plugins": [
        "transform-vue-jsx",
        "@babel/plugin-transform-modules-commonjs",
        "dynamic-import-node",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions"
      ]
    }
  }
}

8.删除文件夹 node_module 然后重新yarn