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

 更新时间:2020年10月30日 09:26:21   作者:兴xing0_0  
这篇文章主要介绍了解决Vue-cli无法编译es6的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

 { 
 "presets": 
 [
 "env"
 ],
 
 "plugins": 
 [
 "transform-runtime"
 ] 
 }

于是es6语法成功编译成es5,开心。

补充知识:vue cli2、cli3编译(打包)后的chunk-vendors.js文件存在es6语法

刚踩过一个大坑,使用vue脚手架搭建的项目build后chunk-vendors.js文件一直存在es6语法,在即将崩溃的边缘想到了一个方法,完美解决,

以下是解决步骤:

1.vue打包是不会编译node_modules中的代码,如果代码中存在node_modules中的引用,build后就会直接合并代码,不会被babel解析。

2.那么根源找到了,你要先找到node_modules中哪个包或者代码没有被babel,然后在webpack.base.conf.js 的 babel-loader中把这个包加入include就可以被babel解析了。

代码如下:

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

vue-cli3可参考官网 webpack相关配置修改loader

以上这篇解决Vue-cli无法编译es6的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue+axios methods方法return取不到值问题及解决

    vue+axios methods方法return取不到值问题及解决

    这篇文章主要介绍了vue+axios methods方法return取不到值问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • VUE事件处理之@click用法示例代码

    VUE事件处理之@click用法示例代码

    在Vue进行前端开发中事件处理是必不可少的功能,下面这篇文章主要给大家介绍了关于VUE事件处理之@click用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 详解vue项目中如何加载markdown

    详解vue项目中如何加载markdown

    这篇文章主要为大家详细介绍了在vue项目中如何加载markdown,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • elementUI Tree 树形控件的官方使用文档

    elementUI Tree 树形控件的官方使用文档

    这篇文章主要介绍了elementUI Tree 树形控件的官方使用文档,用清晰的层级结构展示信息,可展开或折叠。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue实现模糊查询搜索功能的步骤详解

    Vue实现模糊查询搜索功能的步骤详解

    本文主要介绍了Vue实现模糊查询搜索功能的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • vue混入mixin流程与优缺点详解

    vue混入mixin流程与优缺点详解

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-09-09
  • vuex刷新页面丢失登录token信息的解决方案

    vuex刷新页面丢失登录token信息的解决方案

    本文主要介绍了vuex刷新页面丢失登录token信息的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue中实现路由跳转的三种方式(超详细整理)

    Vue中实现路由跳转的三种方式(超详细整理)

    这篇文章给大家详细的整理了Vue中实现路由跳转的三种方式,使用vue-router,声明式-router-link,编程式这三种方法,分别有详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • vue实现在进行增删改操作后刷新页面

    vue实现在进行增删改操作后刷新页面

    这篇文章主要介绍了vue实现在进行增删改操作后刷新页面,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)

    如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)

    这篇文章主要给大家介绍了关于如何巧用Vue.extend继承组件实现el-table双击可编辑的相关资料,不使用v-if、v-else,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06

最新评论