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

428 阅读1分钟

使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等

首先安装babel-polyfill,解决ie不支持promise对象的问题 

 npm install --save-dev babel-polyfill 

安装成功之后,

在main.js第一行引入 

 import 'babel-polyfill' 

安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 

(推荐阮一峰老师的文章 http://www.ruanyifeng.com/blog/2016/01/babel.html) 

我自己是安装了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) 

 } 

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

 module:{ 

 rules:[ 

       { 

            test: /\.js$/, loader: 'babel-loader', include: [ resolve('../src'), resolve('../config'),                resolve('../libs'), resolve('../node_modules/iview') ],

            query: { presets: ['es2015'] } }, 

    ] 

 }