Vue 工程兼容 IE11

IE 11 是最后一款不支持 ES6 语法的浏览器！

一生之敌。

1. 安装相关依赖

npm i babel-polyfill --save
npm i babel-plugin-transform-remove-console --save
npm i css-vars-ponyfill --save
npm i @babel/runtime --save

2. 配置

1. 在 package.json 中修改 browserslist

   "browserslist": [
         "> 1%",
         "last 2 versions",
         "not ie < 11"
   ]
   

2. 根目录的 babel.config.js，没有则新建

   let plugins = ["@babel/plugin-transform-runtime"];
   // @babel/plugin-transform-runtime 用于处理 async/await
   
   if (['production', 'test'].includes(process.env.NODE_ENV)) {
           // 删除控制台打印
           plugins.push("transform-remove-console")
   }
   module.exports = {
       presets: [
           [
               "@babel/preset-env",
               {
                   "useBuiltIns": "entry" // 启用入口模式，需要在 main.js 中配置
               }
           ]
       ],
       sourceType: 'unambiguous', // 让 babel 和 webpack 一样严格区分 commonJS 文件和 ES6 文件
       plugins
   }
   

3. 在 vue.config.js 中配置

   module.exports = {
       // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
       // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
       transpileDependencies: ['ai.touchui-vue', 'element-ui'],
   }
   

4. 在 main.js 中配置

   // 此项配置置于文件开头
   import 'babel-polyfill'; // 标记入口
   import cssVars from 'css-vars-ponyfill'
   cssVars({})
   

3. 参考文章

• vue-cli2、vue-cli3配置babel 兼容低版本
• Vue项目兼容 IE11

• vue报错Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘