Laravel Elixir Browserify失敗！：意外的令牌 - 使用VueJs

Question

任何人都可以幫助我解決這個問題嗎？我試圖學習如何使用Laravel的elixir.browserify + vue.js，但我無法完成這項工作！我得到這個錯誤：

gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token 

D:\xampp\htdocs\pwebdev-project\resources\assets\js\components\skills.vue:1 
<template> 
^ 
ParseError: Unexpected token 

任何想法可能是什麼問題？我是否需要指定某處我想使用vueify或者我只需要像我一樣安裝npm？

的package.json

{ 
    "private": true, 
    "devDependencies": { 
    "babel-runtime": "^6.3.13", 
    "gulp": "^3.8.8", 
    "vue-hot-reload-api": "^1.2.2", 
    "vueify": "^7.0.2" 
    }, 
    "dependencies": { 
    "bootstrap": "^3.3.6", 
    "font-awesome": "^4.5.0", 
    "jquery": "^2.1.4", 
    "laravel-elixir": "^4.0.0", 
    "vue": "^1.0.11", 
    "vue-resource": "^0.1.17" 
    } 
} 

gulpfile.js

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

elixir(function(mix) { 
    mix.browserify('main.js'); 
}); 

main.js

var Vue = require('vue') 
var Skills = require('./components/skills.vue') 

new Vue({ 
    el: '#app', 
    components: { 
     'skills' : Skills 
    } 
}) 

和/components/skills.vue

<template> 
    <div> 
     <select v-model="skills_array" class="form-control" multiple> 
      <option v-for="skill in list" value="@{{skill.id }}" > 
       @{{ skill.name }} 
      </option> 
     </select> 
     <input type="text" name="skills" hidden v-model="skills_array"> 
    </div> 
</template> 

<script> 
    export default { 
     created: function() { 
      var data = []; 
      for (var i = 0; i < this.list.length; i++) { 
       data.push({ 
        'id': this.list[i].id, 
        'name': this.list[i].name, 
        'selected': false 
       }); 
      } 

      this.list = data; 
      this.skills_array = []; 
     }, 
     props: ['list', 'skills_array'] 
    } 
</script> 

Answer 1

一段時間後，環顧四周，我發現this repo (JeffreyWay)其中規定有一些線，我需要在我一飲而盡文件

基本上，我需要這個附加：

npm install laravel-elixir-vueify 

然後在我的gulpfile：

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

require('laravel-elixir-vueify'); ---> this line was missing 

elixir(function(mix) { 
    mix.browserify('main.js'); 
}); 

我所服用的長生不老藥已經與vueify兼容：/我希望這可以幫助任何人。對不起，讓任何試圖幫助我浪費你的時間的人。

Answer 2

看來你在混合你的模板和你的Javascript代碼。

在main.js，你這樣做：

var Skills = require('./components/skills.vue') 

require旨在導入的Javascript模塊，因此一個模塊中的代碼可以在另一個使用。 components/skills.vue不是Javascript文件，而是HTML。所以Javascript解釋器在窒息它。

您需要重寫skills.vue才能看到Javascript。 HTML應該（可能）被移動到一個刀片模板 - 我可能會這樣說，因爲看起來你可能會嘗試使用帶有Vue的Javascript模板系統，這是我沒有太多經驗的東西（而且我看不到您發佈代碼中的任何證據）。

編輯

我從來沒有使用vueify之前，但我的猜測是，有什麼東西在你的gulpfile.js缺少應該配置vueify。

例如，我編寫Coffeescript而不是Javascript，並使用elixir來瀏覽我的Coffeescript。爲了得到這個工作的權利，我有一些配置添加到我的gulpfile：

// add the coffeeify transform to the browserify stack 
// 
elixir.config.js.browserify.transformers.push({ 
    name: 'coffeeify', 
    options: {} 
}); 

// configure browserify to recognize the .coffee extension 
// 
elixir.config.js.browserify.options.extensions = ['.coffee']; 

elixir(function(mix) { ... }); 

我猜，你需要做一些像上面我的第一個配置項：

elixir.config.js.browserify.transformers.push({ 
    name: 'vueify', 
    options: {} 
}); 

這將指示browserify將vueify添加到它的轉換堆棧。

您可能還需要第二個選項：

elixir.config.js.browserify.options.extensions = ['.vue']; 

但我不知道這一點。在我的系統中，添加.coffee擴展名允許我參考我的代碼中沒有.coffee擴展名的模塊。看起來你沒有這樣做。

希望有幫助！

Answer 3

我知道這已經是很久以前了，但是將這個代碼塊放入您的package.json文件中將會正確編譯它。

"browserify": { 
    "transform": [ 
     "vueify", 
     "babelify" 
    ] 
    }, 

現在你可以再次運行gulp