Vue.js 2.0模块构建失败:SyntaxError:使用webpack,Elixir和gulp的意外令牌

花了差不多完整的一天尝试从Vue.js 1.X升级到Vue.js 2.0我仍然得到错误(使用gulp手表)

ERROR in
./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/example.vue
Module build Failed: SyntaxError: Unexpected token (41:79)
at Parser.pp$4.raise (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.parseExprAtom (/home/vagrant/Projects/test/node_modules/buble/dist/buble.umd.js:656:26)
at Parser.pp$3.parseExprSubscripts (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1608:25)
@ ./resources/assets/js/components/example/exmple.vue
7:18-107 @
./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @
./resources/assets/js/app.js

我尝试多次安装,现在以下面的包结束

{
  "private": true,"scripts": {
    "prod": "gulp --production","dev": "gulp watch"
  },"dependencies": {
    "babel-core": "^6.18.0","babel-loader": "^6.2.7","babel-plugin-transform-runtime": "^6.15.0","babel-runtime": "^6.18.0","bootstrap": "^3.3.7","bootstrap-switch": "^3.3.2","css-loader": "^0.25.0","lodash": "^4.14.0","vue": "^2.0.3","vue-hot-reload-api": "^2.0.6","vue-html-loader": "^1.2.3","vue-loader": "^9.7.0","vue-resource": "^1.0.3","vue-strap": "^1.1.18"
  },"devDependencies": {
    "babel-preset-es2015": "6.9.0","bootstrap-sass": "^3.3.7","gulp": "^3.9.1","install": "^0.8.2","laravel-elixir": "^6.0.0-9","laravel-elixir-vue-2": "^0.2.0","laravel-elixir-webpack-official": "^1.0.9","npm": "^3.10.9","vue-router": "^2.0.1"
  }
}

我的gulpfile看起来像

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(mix => {
    mix.sass('app.scss')
        .webpack('app.js')
        .webpack('backend.js')
       //  other stuff. . .  //
}

有什么问题 ?如何解决这些重复错误

解决方法

首先,每当您收到错误意外令牌时…其9/10语法错误.所以进入你的example.vue并检查你是否在方法或计算或数据之后缺少冒号.所以这个错误肯定在
资源/资产/ js / components / example / example.vue在第40行附近.
其次我不确定你在webpack上想要实现什么,但是如果你想将脚本组合成一个,webpack将接受一系列脚本,如下所示:

.webpack([
          'app.js','scripts/choose-language.js'
        ])

你甚至可以用第二个参数指定输出脚本文件名.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...