vue2项目兼容IE11浏览器(解决在某些浏览器兼容模式下打开,页面出现空白的问题)

410 阅读1分钟

1、安装core-js 和 regenerator-runtime

npm install --save core-js regenerator-runtime

2、main.js 引入

// core-js 是一个 JavaScript 的 polyfill 库
// 提供了最新的 ECMAScript 功能在旧版浏览器中的实现
import 'core-js/stable'; 
// 这是用来支持 async/await 语法的运行时环境
import 'regenerator-runtime/runtime';


import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
......

3、修改.browserslistrc文件

> 1%
last 2 versions
ie >= 11

4、修改babel.config.js文件

module.exports = {
  presets: [
    //  Vue CLI 3+ 的默认预设
    // '@vue/cli-plugin-babel/preset', 

    // Vue CLI 2.x 的预设配置
    ['@vue/app', { 
      // 会根据浏览器目标(.browserslistrc)来导入需要的 polyfills
      // entry 模式意味着会在入口文件(main.js)处导入所有目标浏览器需要的 polyfills
      useBuiltIns: 'entry', 
    }]
  ]
}

5、修改vue.config.js,新增transpileDependencies属性

const isProduction = process.env.NODE_ENV === 'production'
const JavaScriptObfuscator = require('webpack-obfuscator')
const obfuscateConfig = require('./obfuscator.config')

module.exports = {
  /* 
    指定哪些依赖包需要经过 Babel 转译
    '*' 意味着会转译所有的依赖包
    确保最大的兼容性,但也会显著增加构建时间和打包体积
   */
  transpileDependencies: ['*'],
}

修改以上文件,重新运行项目即可。