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

使用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，快速升职加薪，走上人生巅峰。