关于vue项目兼容ie浏览器的笔记

原因：出于某种需要，项目需要兼容万恶的ie浏览器。

说说环境：我用的是vue-cli2， babel版本为7.7.2，vue-echarts版本为4.0.4。

1、直接在ie中访问项目页面，一片空白，控制台各种报错。呵呵，开心...此刻，报错信息根本不重要，因为所有的css样式居然一个都没有被加载。最后在同事帮助下，找到问题：postcss.config.js文件中指定的ie版本号为： not ie < 9，而我的ie浏览器版本为ie11。于是修改为：not ie <= 11。到此样式总算是有了。

2、ie对ES6及其以上的高级语法支持不足。经资料查证，需安装badel转ES5。我使用了@babel/polyfill

a、npm i -D @babel/polyfill

b、main.js文件中引入@babel/polyfill，代码如下：

import "@babel/polyfill"

c、在webpack.config.base.js入口文件处配置@babel/polyfill。代码如下：

entry: ['@babel/polyfill', resolve('src/main.js')]

d、在inedx.html文件中添加meta，代码如下：（也可指定浏览器版本）

3、再次在ie中打开，依然空白。控制台有各种报错信息。查看报错文件，还是es6语法问题。怎么回事？！不科学。查看文件路径：src - assets/src - assets - static。嗯？意思是这个目录下的文件并不会被转ES5?验证后貌似是这样。苦逼了，手动转，幸而代码并不多。终于，手动转好了。（后面才知道，babel提供了工具。可查看阮一峰的教程：http://www.ruanyifeng.com/blog/2016/01/babel.html?20170213113809或者上官网自行了解：https://www.babeljs.cn/docs/。不认真看官网，活该手动转。）

4、再次在ie中打开，依然空白。此时控制台依然报错。万幸，只有一行错误信息。呵呵，就这一行，另我头大。多方验证后，矛头指向了我全局引入的vue-echarts，版本为4.0.4。翻阅vue-echarts文档，需要在webpack.config.base.js文件中进行配置。（include中添加 resolve('node_modules/vue-echarts')，resolve('node_modules/resize-detector'。resize-detector在vue-echarts已经引入因此无需再install）代码如下：

{

test: /\.js$/,

loader: 'babel-loader',

include: [

resolve('src'),

resolve('node_modules/vue-echarts'),

resolve('node_modules/resize-detector')

]

}

5、再次在ie中打开，依然空白。此时控制台依然报错。还是那一行错误信息。什么鬼？配置无效？盛怒之下，我注释掉了vue-echarts组件，刷新页面。页面终于加载出来了，开心。但为啥配置了没效果呢？无解。最后我把vue-echarts版本降到3.1.3。页面也可以加载出来，但代码中用到4.0.4版本的属性、方法就没法用了。于是恢复到4.0.4版本。

6、最后将矛头指向了配置babel的配置文件，各种尝试后，无果。最后在官网上看到这样一段描述

这太重要了，如果要编译node_modules下的文件就使用babel.config.js文件，并且官网建议使用babel.config.json格式。Babel本身正在使用它。于是将.babelrc文件替换为babel.config.js文件，重启项目。ie加载正常。babel.config.js代码如下：

module.exports = function (api) {

api.cache(true);

const presets = [

[

'@babel/preset-env'

]

];

const plugins = [

'@babel/plugin-proposal-object-rest-spread',

'@babel/plugin-proposal-class-properties',

'@babel/plugin-transform-runtime',

'transform-vue-jsx'

];

return {

presets,

plugins

};

结语：经过这件事终于意识到，认真看官网真的，真的，真的很重要。如果你也在为这样的问题烦恼，希望这篇文章对你能有所帮助。

禁止转载，如需转载请通过简信或评论联系作者。