最近项目尾声,需要做一些兼容性问题处理。其中最重要的自然是ie浏览器的兼容性问题了,于是便开始了网上查找兼容ie11旅程。网上的解决办法大都一致,便是让你安装babel-polyfill模块。使用babel-polyfill将vue项目中的es6语法的相关模块进行转译(转译成es5)。
大致步骤是:1. 安装babel-polyfill, 方法: npm install babel-polyfill --save-dev (使用npm安装, 用了cnpm安装后还是会报错,具体原因我也不知道....但亲测npm安装有效~)
2. 在入口文件main.js中引入, 方法:import 'babel-polyfill' (建议放在文件最上方)
3. 修改webpack.base.conf.js配置文件。
定位进去之后你将看到一大串打包后的代码,让人崩溃~(这让人怎么定位错误啊~喂!)但是,这个报错信息正式解决问题的关键,定位进去后,会看到如图的信息:
慢慢下拉定位的错误信息,在代码模块最后你会看到这样的信息:(如图)
这些信息可以帮你定位出错的模块是哪个,我的理解是这个模块的代码由于没有转译成es5的语法,所以IE11无法识别就版语法错误了。接下来定位好错误的根源,就可以着手解决了。找到webpack.base.conf.js文件,里面有个关于配置babel-loader的地方,在这里加上需要转译的npm模块就可以了,(如图)
加上之后重启项目,就不会再报这个错了。但有可能还是无法运行项目,因为可能不止这一个模块有类似的问题。接下来就是运用相同的方法处理了。直到不再报语法错误即可(一定要很细心找到所有的相关的错误模块,这个上我可是吃了很大的亏~)附上我找到的所有需要处理的模块吧~