ie不支持es6的问题，安装插件，配置

haoxuan

2024-01-19 13f102240d9c0c9d5a133fb093551f2e08d7c55c

ie不支持es6的问题，安装插件，配置

 .babelrc

New file
@@ -0,0 +1,19 @@
// {
//   "presets":["@babel/preset-env"],
//   "plugins":["@babel/plugin-transform-runtime"],
// }
{
  "presets":[
    [
      "env",{
        "modules":false,
        "targets":{
          "browsers":["ie >=8"],
        },
        "useBuiltIns":true,
        "debug":true
      }
    ]
  ],
  "plugins":["@babel/plugin-transform-runtime"],
}

 babel.config.js

New file
@@ -0,0 +1,22 @@
/* eslint-env node */
// require('@rushstack/eslint-patch/modern-module-resolution')

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

 package-lock.json

Diff too large

 package.json

@@ -13,12 +13,15 @@
    "prepare": "husky install"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@element-plus/icons-vue": "^2.1.0",
    "@vueuse/core": "^10.5.0",
    "@xstate/vue": "^2.0.0",
    "axios": "^1.5.1",
    "dayjs": "^1.11.10",
    "element-plus": "^2.4.1",
    "es6-promise": "^4.2.8",
    "js-base64": "^2.6.2",
    "lodash-es": "^4.17.21",
    "pinia": "^2.1.7",
    "vue": "^3.3.4",
@@ -34,6 +37,7 @@
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.18.6",
    "@vitejs/plugin-legacy": "^5.2.0",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
@@ -45,6 +49,7 @@
    "npm-run-all2": "^6.1.1",
    "prettier": "^3.0.3",
    "sass": "^1.69.4",
    "terser": "^5.27.0",
    "typescript": "~5.2.0",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-icons": "^0.17.1",
@@ -57,5 +62,10 @@
      "eslint --fix",
      "prettier --write"
    ]
  }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "note ie <= 8"
  ]
}

 src/main.ts

@@ -1,3 +1,7 @@
// 兼容ie
import '@babel/polyfill'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
import './assets/styles/main.css'

import { createApp } from 'vue'

 vite.config.ts

@@ -6,7 +6,8 @@
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// 兼容低版本浏览器
import legacy from '@vitejs/plugin-legacy'
const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
@@ -23,7 +24,12 @@
  resolve: {
    alias: {
      '@': pathSrc
    }
    },
  },
  
  build: {
    target:['chrome52'],
    cssTarget:["chrome52"],
  },
  plugins: [
    vue(),
@@ -42,6 +48,32 @@

      dts: path.resolve(pathSrc, 'auto-imports.d.ts')
    }),
   
    // 兼容低版本浏览器
    legacy({
      targets: ['defaults', 'ie >= 11', 'chrome < 60','firefox < 59'], //需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      modernPolyfills:true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all'
      ]
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
@@ -55,6 +87,12 @@
    }),
    Icons({
      autoInstall: true
    })
  ]
    }),
  ],
  configureWebpack:config=>{
    config.entry.app=['babel-polyfill','./src/main.js']
  },
  // chainWebpack: (config) => {
  //   config.entry('main').add('babel-polyfill')
  // },
})