快捷導(dǎo)航

解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問題

更新時(shí)間：2024年01月04日 09:55:40 作者：IT利刃出鞘

這篇文章主要介紹了解決Vue運(yùn)算符報(bào)錯(cuò):Syntax Error: Unexpected token問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

簡(jiǎn)介

說明

本文介紹Vue項(xiàng)目中...（三點(diǎn)運(yùn)算符）的“Syntax Error: Unexpected token”報(bào)錯(cuò)的解決方法。

（當(dāng)然，其他項(xiàng)目中類似的問題解決方案也類似）。

報(bào)錯(cuò)的原因

...（三點(diǎn)運(yùn)算符）是ES6的新特性，Webpack無法解析，所以會(huì)報(bào)這個(gè)錯(cuò)誤。

項(xiàng)目里雖然已經(jīng)引入了babel，但需要配置一下才能解決此問題。

問題復(fù)現(xiàn)

本處我是在使用Vuex的...mapState時(shí)遇到的。

babel依賴 （vue-cli腳手架默認(rèn)的依賴）

配置文件：package.json

webpack的babel配置（vue-cli腳手架默認(rèn)的配置）

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

代碼

<template>
  <div class="container">
    <h3>ComponentB</h3>
    <div>計(jì)數(shù)器的值：{{ count }}</div>
    <div>計(jì)數(shù)器的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>

報(bào)錯(cuò)信息

解決方案

方案1：.babelrc（配置presets）(推薦)

方案介紹

配置文件：項(xiàng)目根目錄/.babelrc （如果沒有，則新建此文件）

改為如下配置：

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

第三方庫問題

如果自己引入的第三方庫中存在擴(kuò)展運(yùn)算符，就需要在 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）

本方法不能解決第三方庫的...運(yùn)算符問題，不推薦使用。

方案介紹

配置文件：項(xiàng)目根目錄/.babelrc （如果沒有，則新建此文件）

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

第三方依賴的問題

若項(xiàng)目里其他依賴中存在...擴(kuò)展運(yùn)算符，必須在 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('第三方庫的路徑')]
    }
  ]
}

此時(shí)運(yùn)行會(huì)報(bào)錯(cuò)

方案3：依賴+.babelrc

此法比較麻煩，不推薦。

方案說明

手動(dòng)加入babel-preset-es2015 依賴和babel-plugin-transform-object-rest-spread依賴，然后配置 .babelrc。

配置文件：項(xiàng)目根目錄/.babelrc （如果沒有，則新建此文件）

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