Vue.js 2.0モジュールビルドに失敗しました：SyntaxError：webpack、Elixir、gulpを使用した予期しないトークン

Question

Vue.js 1.XからVue.js 2.0へのアップグレードをほぼ完了した後も、ウォッチ）

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

私は私の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. . . // 
} 

のように見える複数回インストールしようと、今、次のパッケージ

{ 
    "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" 
    } 
} 

で終了

何が問題なのですか？これらの繰り返しエラーを解決するには？

Answer 1

最初に、予期しないトークンがエラーになると、その9/10の構文エラーが発生します。したがって、あなたのexample.vueに入り、メソッドや計算やデータの後にコロンがないかどうかを確認してください。したがって、このエラーは間違いなく resources/assets/js/components/example/example.vueのどこかの行40にあります。 第2に、webpackで何を達成しようとしているのかよく分かりませんが、スクリプトを1つにまとめる場合、webpackは次のようなスクリプトを受け入れます：

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

また、出力スクリプトのファイル名を2番目のパラメータで指定することもできます。