为了兼容ie11在webpack+babel打包vue.js后发现报错"ReferenceError: “i”未定义"

Question

问题：使用webpack+babel打包es6=>es5，运行打包后的项目报错"ReferenceError: “i”未定义"，页面空白，babel-polyfill已经引入。

！！！！但是，在Chrome中可以正常运行不报错说明应该不是代码问题，那就应该还是打包的问题吧，请大佬指点指点！！！！！！！

报错

webpack配置

babelrc配置

代码中引入方式

第一张图的vue引入报错，第二张图居然没报错

---

菜鸡在此，请各位赐教

Answer 1

参考GPT和自己的思路：

根据你提供的信息，可能是以下原因导致报错：

1. babel-polyfill的引入方式不正确：babel-polyfill应该在应用程序的入口点（entry point）处 import 或 require；

2. webpack配置中没有正确引入babel-polyfill：可以尝试在webpack的entry中添加babel-polyfill依赖，例如：

   entry: [
     'babel-polyfill',
     './src/index.js'
   ]
   

   也可以使用babel-preset-env的useBuiltIns选项来按需引入polyfill。在babelrc配置文件中添加useBuiltIns选项，并将其值设置为'usage'，例如：

   {
     "presets": [
       ["env", {
         "useBuiltIns": "usage"
       }]
     ]
   }
   

3. babelrc配置文件中的preset-env选项没有正确配置：可以尝试将预设preset-env中的targets选项更改为{'ie': '11'}，例如：

   {
     "presets": [
       ["env", {
         "targets": {
           "ie": "11"
         }
       }]
     ]
   }
   

希望这些解决方案能够帮助你解决问题。如果还有其他疑问，请随时提出。