Vue.js 2.0 Modulaufbau fehlgeschlagen: SyntaxError: Unerwartetes Token mit Webpack, Elixir und Schluck

Question

Nachdem ich fast den ganzen Tag damit verbracht habe, von Vue.js 1.X auf Vue.js 2.0 zu upgraden, bekomme ich immer noch Fehler (mit Schluck sehen)

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

ich mehrmals und beendet mit dem folgenden Paket

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

meine gulpfile sieht aus wie

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

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

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

zu installieren versucht

Was ist das Problem? Wie löst man diese wiederholten Fehler?

Answer 1

Erstens, wenn Sie einen Fehler unerwartet Token erhalten ... seine 9/10 Syntaxfehler. Gehen Sie also in Ihr example.vue und prüfen Sie, ob Ihnen nach Methoden oder berechneten Daten ein Doppelpunkt fehlt. Also dieser Fehler ist definitiv in resources/assets/js/components/example/example.vue irgendwo um Linie 40. Zweitens bin ich mir nicht sicher, was Sie mit Webpack dort erreichen wollen, aber wenn Sie Skripte zu einem kombinieren wollen, wird Webpack eine Reihe von Skripten wie folgt akzeptieren:

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

und Sie können sogar Ausgabedatei Dateinamen mit zweiten Parameter angeben.