美文网首页前端Vue专辑
vue脚手架搭建项目的兼容性配置

vue脚手架搭建项目的兼容性配置

作者: a333661d6d6e | 来源:发表于2018-11-23 21:57 被阅读3次

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等。
    首先安装babel-polyfill,解决ie不支持promise对象的问题


    npm install --save-dev babel-polyfill
    

    安装成功之后,在main.js第一行引入

    import 'babel-polyfill'
    

    安装引入成功之后,如果项目还不能正常运行
    安装了babel-preset-es2015和babel-preset-stage-2
    在.babelrc里面进行配置

    {
      "presets": ["stage-2","es2015"],
      "plugins": ["transform-vue-jsx", "transform-runtime"]
    }
    

    然后在webpack.base.config.js进行配置
    脚手架搭建的项目里面都有这个方法:

    function resolve(dir) {
      return path.join(__dirname, dir)
    }全栈开发交流圈一起学习交流:864305860
    

    在module里配置需要进行编译的文件夹(如下)

    module:{
      rules:[
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [
            resolve('../src'), resolve('../config'),       
            resolve('../libs'), resolve('../node_modules/iview')
          ],
          query: {
            presets: ['es2015']
          }//欢迎加入全栈开发交流圈一起学习交流:864305860
        },//面向1-3年前端人员
      ]//帮助突破技术瓶颈,提升思维能力
    }
    

    结语

    感谢您的观看,如有不足之处,欢迎批评指正。

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    相关文章

      网友评论

        本文标题:vue脚手架搭建项目的兼容性配置

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