解决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 报错-4058 ENOENT:no such file or directory的原因及解决方法

    Vue 报错-4058 ENOENT:no such file or directory的原因及解决方法

    Vue 报错-4058 ENOENT: no such file or directory的原因和解决办法,关于为什么为会报这个错误,按照字面意思的理解就是没有找到这个文件或这个路径,说明是路径不对,本文给大家分享解决方案,感兴趣的朋友一起看看吧
    2023-10-10
  • vue实现给当前元素添加样式,其他元素无样式问题

    vue实现给当前元素添加样式,其他元素无样式问题

    这篇文章主要介绍了vue实现给当前元素添加样式,其他元素无样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue实现记事本案例

    vue实现记事本案例

    这篇文章主要为大家详细介绍了vue实现记事本案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解Vue如何实现自定义动画与动画效果设计

    详解Vue如何实现自定义动画与动画效果设计

    在Vue中,动画效果是非常有用的,它可以使用户界面变得更加生动、有趣,本文中我们将学习如何在Vue中进行自定义动画与动画效果设计,感兴趣的可以了解一下
    2023-06-06
  • vue3中使用百度地图的简单步骤

    vue3中使用百度地图的简单步骤

    最近项目要用到百度地图api,好久没用到地图,就百度了一番,下面这篇文章主要给大家介绍了关于vue3中使用百度地图的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue elementui表格获取某行数据(slot-scope和selection-change方法使用)

    vue elementui表格获取某行数据(slot-scope和selection-change方法使用)

    这篇文章主要介绍了vue elementui表格获取某行数据(slot-scope和selection-change方法使用),本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue多组件仓库开发与发布详解

    Vue多组件仓库开发与发布详解

    这篇文章主要介绍了Vue多组件仓库开发与发布详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue elementUI使用tabs与导航栏联动

    vue elementUI使用tabs与导航栏联动

    这篇文章主要为大家详细介绍了vue elementUI使用tabs与导航栏联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • Vue项目中使用iView组件库设置样式不生效的解决方案

    Vue项目中使用iView组件库设置样式不生效的解决方案

    这篇文章主要介绍了Vue项目中使用iView组件库设置样式不生效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue实现购物小球抛物线的方法实例

    Vue实现购物小球抛物线的方法实例

    这篇文章主要给大家介绍了Vue实现购物小球抛物线的方法实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11

最新评论