Vue--解决...运算符报错：Syntax Error: Unexpected token

原文网址：Vue--解决...运算符报错：Syntax Error: Unexpected token_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍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"
  ]
}