解决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"
  ]
}

总结

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

相关文章

  • 分享9个Vue的巧妙冷技巧

    分享9个Vue的巧妙冷技巧

    这篇文章主要介绍了分享9个Vue的巧妙冷技巧,文章首先通过巧用$attrs和$listeners的技巧展开,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • vue中element 上传功能的实现思路

    vue中element 上传功能的实现思路

    这篇文章主要介绍了vue中element 的上传功能的实现思路,本文大概通过两种实现思路,具体内容详情大家跟随脚本之家小编一起看看吧
    2018-07-07
  • vue2使用el-date-picker实现动态日期范围demo

    vue2使用el-date-picker实现动态日期范围demo

    这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue3组合式API实现todo列表效果

    vue3组合式API实现todo列表效果

    这篇文章主要介绍了vue3组合式API实现todo列表,下面用组合式 API的写法,实现一个可新增、删除的todo列表效果,需要的朋友可以参考下
    2024-08-08
  • Vue3前端与Python(Django)后端接口简单代码示例

    Vue3前端与Python(Django)后端接口简单代码示例

    这篇文章主要介绍了如何使用Django创建项目和应用,配置跨域访问,并编写视图和API,同时还讲述了如何使用Vue3创建项目,编写组件调用后端API,需要的朋友可以参考下
    2025-01-01
  • vue实现抽奖效果Demo

    vue实现抽奖效果Demo

    这篇文章主要介绍了vue实现抽奖效果Demo,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue项目中缺少明显入口文件的原因及解决策略

    Vue项目中缺少明显入口文件的原因及解决策略

    本文探讨了Vue项目中缺少明显入口文件的原因,并提供了解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-11-11
  • 极速上手 VUE 3 teleport传送门组件及使用语法

    极速上手 VUE 3 teleport传送门组件及使用语法

    teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素,也就是说teleport 中的内容允许我们控制在任意的DOM中,使用简单,对VUE 3 teleport传送门相关知识感兴趣的朋友一起看看吧
    2021-10-10
  • Vue3实现自定义Input组件的示例详解

    Vue3实现自定义Input组件的示例详解

    这篇文章主要为大家详细介绍了如何使用Vue3自定义实现一个类似el-input的组件,可以v-model双向绑定,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • Vue+Element UI 实现视频上传功能

    Vue+Element UI 实现视频上传功能

    这篇文章主要介绍了Vue+Element UI 实现视频上传功能,前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL,具体实现代码及效果展示跟随小编一起看看吧
    2022-01-01

最新评论