前端Vue专辑

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

2018-11-23  本文已影响3人  a333661d6d6e

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

上一篇下一篇

猜你喜欢

热点阅读