解决Vue运算符报错:Syntax Error: Unexpected token问题

 更新时间:2024年01月04日 09:55:40   作者:IT利刃出鞘  
这篇文章主要介绍了解决Vue运算符报错:Syntax Error: Unexpected token问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

简介

说明

本文介绍Vue项目中...(三点运算符)的“Syntax Error: Unexpected token”报错的解决方法。

(当然,其他项目中类似的问题解决方案也类似)。

报错的原因

...(三点运算符)是ES6的新特性,Webpack无法解析,所以会报这个错误。

项目里虽然已经引入了babel,但需要配置一下才能解决此问题。

问题复现

本处我是在使用Vuex的...mapState时遇到的。

babel依赖 (vue-cli脚手架默认的依赖)

配置文件:package.json

webpack的babel配置(vue-cli脚手架默认的配置)

配置文件:webpack.base.conf.js

代码

<template>
  <div class="container">
    <h3>ComponentB</h3>
    <div>计数器的值:{{ count }}</div>
    <div>计数器的2倍:{{ doubleCount }}</div>
  </div>
</template>
 
<script>
import {mapState, mapGetters} from 'vuex'
 
export default {
  computed: {
    ...mapState('module1', ['count', 'info']),
    ...mapGetters('module1', ['doubleCount'])
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

报错信息

解决方案

方案1:.babelrc(配置presets)(推荐)

方案介绍

配置文件:项目根目录/.babelrc    (如果没有,则新建此文件)

改为如下配置:

{
  "presets": [
    "stage-2"
  ]
}

第三方库问题

如果自己引入的第三方库中存在扩展运算符,就需要在 webpack.base.conf.js 中添加 resolve('第三方库的路径')。

module:{
  rules:[
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('第三方库的路径')]
    }
  ]
}

方案2:.babelrc(配置presets和plugins)

本方法不能解决第三方库的...运算符问题,不推荐使用。

方案介绍

配置文件:项目根目录/.babelrc    (如果没有,则新建此文件)

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"]
}

第三方依赖的问题

若项目里其他依赖中存在...扩展运算符,必须在 webpack.base.conf.js 中添加 resolve('第三方依赖的路径')。

module:{
  rules:[
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('第三方库的路径')]
    }
  ]
}

此时运行会报错

方案3:依赖+.babelrc

此法比较麻烦,不推荐。

方案说明

手动加入babel-preset-es2015 依赖和babel-plugin-transform-object-rest-spread依赖,然后配置 .babelrc。

配置文件:项目根目录/.babelrc    (如果没有,则新建此文件)

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2",
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "transform-object-rest-spread"
  ]
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue.config.js使用代理配置真实请求url方式

    vue.config.js使用代理配置真实请求url方式

    这篇文章主要介绍了vue.config.js使用代理配置真实请求url方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解vue2.0模拟后台json数据

    详解vue2.0模拟后台json数据

    这篇文章主要介绍了vue2.0模拟后台json数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • VUE中Non-Props属性的使用

    VUE中Non-Props属性的使用

    本文主要介绍了VUE中Non-Props属性的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vuex 解决报错this.$store.commit is not a function的方法

    vuex 解决报错this.$store.commit is not a function的方法

    这篇文章主要介绍了vuex 解决报错this.$store.commit is not a function的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 使用Bootstrap + Vue.js实现添加删除数据示例

    使用Bootstrap + Vue.js实现添加删除数据示例

    本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • vue的webcamjs集成方式

    vue的webcamjs集成方式

    这篇文章主要介绍了vue的webcamjs集成方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入实例代码

    vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入实例代码

    这篇文章主要给大家介绍了关于vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入的相关资料,在Vue 3中可以通过配置vue.config.js文件来进行按需自动引入,需要的朋友可以参考下
    2024-02-02
  • vue中记录滚动条位置的两种方法

    vue中记录滚动条位置的两种方法

    最近用 Vue 做移动端页面遇到一个问题,需要记住滚动条的位置,所以下面这篇文章主要给大家介绍了关于vue中记录滚动条位置的两种方法,文中给出了详细的实例,需要的朋友可以参考下
    2023-01-01
  • Vue3 响应式高阶用法之customRef()的使用

    Vue3 响应式高阶用法之customRef()的使用

    customRef()是Vue3的高级工具,允许开发者创建具有复杂依赖跟踪和自定义更新逻辑的ref对象,本文详细介绍了customRef()的使用场景、基本用法、功能详解以及最佳实践,包括防抖、异步更新等用例,旨在帮助开发者更好地理解和使用这一强大功能
    2024-09-09
  • vue2导入使用vue-codemirror组件的教程详解

    vue2导入使用vue-codemirror组件的教程详解

    vue-codemirror是一个基于Vue的代码在线编辑器组件,它封装了CodeMirror编辑器,使得在Vue项目中可以方便地使用CodeMirror,下面我们就来看看vue-codemirror的具体使用吧
    2024-02-02

最新评论