关于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

  };

};

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

你可能感兴趣的:(关于vue项目兼容ie浏览器的笔记)