解决Vue运算符报错:Syntax Error: Unexpected token问题
作者：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"
]
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。