最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝试成功,以下贴出本人实践方案

1. 安装 npm install --save-dev babel-preset-es2015

2. 安装 npm install --save-dev babel-preset-stage-3

3. 在项目根目录创建一个.babelrc文件  里面内容 最基本配置是:

{
// 此项指明,转码的规则
"presets": [
// env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd,commonjs这样的模块化文件,不进行转码
["env", { "modules": false }],
// 下面这个是不同阶段出现的es语法,包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换,transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中,不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则,当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量,如果没有设置BABEL_ENV则使用NODE_ENV,如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}

然后重启npm run dev  你会发现,可以在其他低版本浏览器跑了,基本兼容所有浏览器,ie8以下除外。而且大多数的手机浏览器也ok。

希望能够帮到大家

vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. 用vue ui创建的项目怎么关闭eslint校验

    在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了

  3. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  4. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  5. 用Angule Cli创建Angular项目

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  6. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  7. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  8. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  9. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

随机推荐

  1. vue-router 二级路由

    /** * Created by 我 on 2017/12/4. */ import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue import Vu ...

  2. 洛谷 [P3384] 树链剖分 模版

    支持各种数据结构上树,注意取膜. #include <iostream> #include <cstring> #include <algorithm> #incl ...

  3. bzoj 2095: [Poi2010]Bridges [混合图欧拉回路]

    2095: [Poi2010]Bridges 二分答案,混合图欧拉路判定 一开始想了一个上下界网络流模型,然后发现不用上下界网络流也可以 对于无向边,强制从\(u \rightarrow v\),计算 ...

  4. BZOJ 4455: [Zjoi2016]小星星 [容斥原理 树形DP]

    4455: [Zjoi2016]小星星 题意:一个图删掉一些边形成一棵树,告诉你图和树的样子,求让图上的点和树上的点对应起来有多少方案 看了很多题解又想了一段时间,感觉题解都没有很深入,现在大致有了自 ...

  5. BZOJ 3622: 已经没有什么好害怕的了 [容斥原理 DP]

    3622: 已经没有什么好害怕的了 题意:和我签订契约,成为魔法少女吧 真·题意:零食魔女夏洛特的结界里有糖果a和药片b各n个,两两配对,a>b的配对比b>a的配对多k个学姐就可能获胜,求 ...

  6. WPF: WPF 中的 Triggers 和 VisualStateManager

    在之前写的这篇文章 WPF: 只读依赖属性的介绍与实践 中,我们介绍了在 WPF 自定义控件中如何添加只读依赖属性,并且使其结合属性触发器 (Trigger) 来实现对控件样式的改变.事实上,关于触发 ...

  7. Redis简介及使用详解

    一.Redis的简介 在缓存技术里面相对于memcache来说,redis逼格更高,原因redis不单单只是做缓存,它更能相对memcache更加广泛,但是也是因不同的项目而用,redis的 一个内存 ...

  8. Java生产者消费者

    简单的生产者.消费者,一个数据缓冲区,一个或者多个生产者把数据放入缓冲区.一个或者多个消费者将数据从缓冲区取走.该缓冲区是一个数据共享,必须进行同步处理,如果缓冲区是满的,生产者将不能放数据,同理如果 ...

  9. 深入cocos2d-x中的touch事件

    深入cocos2d-x中的touch事件 在文章cocos2d-x中处理touch事件中简单讨论过怎样处理touch事件, 那么今天来深入了解下cocos2d-x中是怎样分发touch事件的. 我们最 ...

  10. XAMPP禁止目录浏览的方法

    XAMPP是目前比较流行Web服务器套件,集成了Apache.MySQL.PHP.PERL.FTP等各种软件包.但是细心的人可以发现,XAMPP安装完成后,默认是可以目录浏览的,这有些不安全.如果需要 ...