Vue2.0 ES6语法降级ES5的操作

由于部分低版本的手机还不支持ES6语法，将会导致vue报错。综合了网上的各种办法，我的项目现在终于成功降级ES5.

首先安装插件

npm install -D babel-preset-es2015 babel-core babel-preset-stage-2 babel-loader

编辑配置文件

编辑/build/webpack.base.conf.js

编辑entry节点，变成如下

entry: {
  app: ['babel-polyfill', './src/main.js']
}

替换module.rules数组中的

{
    test: /\.js$/,
     loader: 'babel-loader',
     include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    }

为

{
    test: /\.js$/,
    exclude: /node_modules/, // 处理除了nodde_modules里的js文件
    loader: 'babel-loader'
}

再根目录新建.babelrc内容为

{
 "presets": [
  "es2015",
  "stage-2"
 ],
 "plugins": [

 ]
}

如果使用了URLSearchParams，需要安装npm install url-search-params-polyfill --save，然后在使用了该对象的类头部引入import 'url-search-params-polyfill'

最后npm run build 编译。

验证是否成功

查看dist目录下编译出来的js里面是否还有const/let等ES6的语法，没有的话基本就成功了。

补充知识：vue-cli3.x 组件es6 转es5 失败 导致低版本浏览器报错

错误为 Uncaught SyntaxError: Unexpected token ...

这个问题网上看了很多解决方式 都没发实现这个组件转化成ES5

这个坑爹的组件就是 vue-superslide

来看一下他入口文件的内容

// 导入组件
import superslide from './superslide'
// import superSlide from "./slide";
// import SuperSlideItem from "./slide-item";

// 存储组件列表
const components = [superslide]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
 // 判断是否安装
 if (install.installed) return
 // 遍历注册全局组件
 components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}

export default {
 // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
 install,
 // 以下是具体的组件列表
 ...components
}

真的是有es6语法 悲伤 整个项目只有这个组件没有转义成ES5 不明所以 还是要解决啊 我并没有放弃它

解决方式 去node_modules文件夹下面找到，把它当一个静态资源引入直接放在assets目录下

原来插件的引入方式是

import VueSuperSlide from 'vue-superslide'

Vue.use(VueSuperSlide)

现在的引入方式是

import VueSuperSlide from './assets/js/vue-superslide/packages/index.js'

Vue.use(VueSuperSlide)

这简直的 LOW 到不行 但解决问题了 我忍一忍。

以上这篇Vue2.0 ES6语法降级ES5的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue如何基于es6导入外部js文件

    也许大家都是使用习惯了es5的写法喜欢直接用<Script>标签倒入js文件,但是很是可惜,这写法.在es6,或则说vue环境下不支持 真的写法是怎样? 首先.我们要改造我们要映入的外部js文件,改成下面这个格式.主要是红色方块内部代码,我们需要将我们的模块"抛出",让人能获取到 代码: function realconsole(){ alert("hello.thanks use me"); } export { realconsole } 其次,到我

  • webstorm和.vue中es6语法报错的解决方法

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错. 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue 这样vue文件就相当于html

  • 解决Vue-cli无法编译es6的问题

    最近使用vue-cli创建项目的时候,遇到es6无法转换成es5的情况,项目在ios9下无法正常运行,在webpack.base.conf.js里面修改babel的配置项,添加src目录也没用,于是百度,谷歌找方法,最后自己想了想是不是没有配置.babelrc文件,于是在项目根目录创建.babelrc文件,同时在文件中编写 { "presets": [ "env" ], "plugins": [ "transform-runtime&q

  • 详解vue-cli+es6引入es5写的js(两种方法)

    学习了vue有一段日子了,vue+es6开发非常好用,vue的插件非常多,很充足,但是还是会用到引入第三方外部js的时候,但是很多人在vue-cli中的.vue文件引入es6会出很多错误,因为我们的代码是es6写的,你引入es5的js当然会出问题,那么而接下来我讲大家讲解一波,怎么引入第三方es5写的 js 方法1: import XX from "路径" Vue.use(XX); 这里的js文件要导出 用export default { Vue.proprtypes.aa=funct

  • vscode配置vue下的es6规范自动格式化详解

    前言 最近在写Vue的时候,遇见了js es6格式化问题,因为我平时用vscode在写php,所以会安装一些格式化插件,也包括html-css-js的插件 导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现代码错误等异常 写这篇的时候,我也查阅了很多资料有很多的资料不能被使用,也换过很多的编辑器如:Atom,sublime,webstorm 否掉的编辑器 Atom 这一款编辑器真心颜值高,但是插件是真心不好弄,各种被墙,各种的不适应,所以我决定还是弃掉 sublim

  • ES6 Proxy实现Vue的变化检测问题

    Vue变化检测Object使用DefineProperty.数组使用方法拦截实现.最近,Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测,在官方还没给出新方法之前,我们先实现一个基于Proxy的变化检测. 模块划分 参照之前Vue变化检测的代码,将Vue 变化检测的功能分为以下几个部分. Observer Dep Watcher Utils 首先,我们要确定的问题是,将Dep依赖搜集存在哪里.Vue 2.x里,Object的依赖收集放在defineRactive,Array的依

  • Vue2.0 ES6语法降级ES5的操作

    由于部分低版本的手机还不支持ES6语法,将会导致vue报错.综合了网上的各种办法,我的项目现在终于成功降级ES5. 首先安装插件 npm install -D babel-preset-es2015 babel-core babel-preset-stage-2 babel-loader 编辑配置文件 编辑/build/webpack.base.conf.js 编辑entry节点,变成如下 entry: { app: ['babel-polyfill', './src/main.js'] } 替

  • 利用babel将es6语法转es5的简单示例

    利用babel将es6语法转es5的简单示例

    前言 Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 本文讲解需预装node和npm.大家可以参考这篇文章:http://www.jb51.net/article/90518.htm,这里介绍的非常详细. 文件目录结构 生成包管理配置文件package.json npm init -y 安装转换工具 npm i -g babel-cli npm i --save-dev babel-pr

  • Vue2.0 从零开始_环境搭建操作步骤

    Vue2.0 从零开始_环境搭建操作步骤

    简要:继项目空闲后,开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.什么是VUE? 是一种node.js框架,特点如下: 1.数据绑定 (特性:双向绑定:一旦发生变化,Dom节点实时更新:PS:尽量抛弃JQ,次特点已经可以解决很多特效等问题) 2.组件化(比如:乐高积木一样通过互相引用而组装起来) 二.开发环境 三.环境搭建 1. 包管理器安装 (1) Homebrew安装 (mac 环境,win无法安装)

  • Vue2.0实现组件之间数据交互和通信操作示例

    本文实例讲述了Vue2.0实现组件之间数据交互和通信操作.分享给大家供大家参考,具体如下: Vue2.0组件之间数据交互和通信. Vue2.0废弃了dispatch 和 $broadcast,如何在实现组件之间的数据交互和通信?下面是一个简单的demo解决了这个问题. 事件中心(evengtHub.js): //定义事件中心,在模板通信是使用. import Vue from 'vue'; export default { bus: new Vue() } 父组件: <div> <!--

  • 详解关于vue2.0工程发布上线操作步骤

    找了不少资料如何发布到服务器,然而还是没找到合适的可实际操作的文档.很多文档打着上线发布的标题,其实就是本地运行而已.其实vue2.0工程发布相当简单. 文章重点: 讲解vue工程配置部分的意义 如何打包为生产环境中的前端工程 如何打包发布到云端以及nginx服务器配置 一.vue工程配置部分的意义 首先我们先看下vue2.0整体工程目录结构 (非重点省略) - vueDemo //你的vue工程名 - build - build.js - check-version.js - utils.js

  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)

    今天,在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下: 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: 丢弃了: 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, key) in obj (value, key, index) in obj 解决后: 以上这篇浅谈Vue2.0中v-for迭代语法的变化(key.i

  • idea 设置支持ES6语法的操作

    idea 设置支持ES6语法的操作

    1.点击File→settings: 2.选择Languages & Frameworks下面的JavaScript 选择版本号为ECMAScript 6即可: 补充:idea 修改设置 检测方式为 es6 intellij idea 14不支持ES6语法!javascript 文件内到处飘红 file>settings>Lauguages & Frameworks>javascript 将javascript languages version 修改为 ECMAScri

  • vue2.0实战之基础入门（1）

    vue2.0实战之基础入门（1）

    最近公司的H5项目准备重构,部门老大说前端使用vue2.0来开发,所以就准备把整个项目的开发过程记录下来,一方面是为了记录开发过程中遇到的坑,另一方面也加强自己写作的能力. 什么是 Vue? 简要介绍一下vue,vue就是一个前端框架,特点是 数据双向绑定,比如说改变input输入框里的内容,就会自动同步更新到页面上绑定该输入框的组件的值. 看一下官方对vue的介绍: Vue.js,读音 /vjuː/,和view发音几乎一样,可见重心是在视图(view)层上的.Vue.js 的目标是通过尽可能简

  • 详解用webpack2.0构建vue2.0超详细精简版

    详解用webpack2.0构建vue2.0超详细精简版

    npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号 npm install --save-dev babel-core babel-loader babel-preset-es2015

  • WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g babel-cli 2.当前项目,适用于使用不同babel版本的情况 npm install --save-dev babel-cli 三.Babel基本用法 # 转码结果输出到标准输出 babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 bab

随机推荐