美文网首页前端开发那些事儿
关于vue项目兼容ie浏览器的笔记

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

作者: 汝若念卿 | 来源:发表于2020-06-11 22:28 被阅读0次

    原因:出于某种需要,项目需要兼容万恶的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,代码如下:(也可指定浏览器版本)

        <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome" />

    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浏览器的笔记

        本文链接:https://www.haomeiwen.com/subject/bsaitktx.html