Laravel Elixir Browserify Failed !: Неожиданный токен — Использование VueJs

Может ли кто-нибудь помочь мне решить эту проблему? Я пытаюсь научиться использовать elixir.browserify + vue.js от Laravel, но я не могу заставить это работать! Я получаю эту ошибку:

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>

4

Решение

Через некоторое время оглядываясь по сторонам я нашел это репо (JeffreyWay) в котором говорится, что есть некоторые строки, которые мне нужно было добавить в мой файл gulp

В основном мне нужно это:

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: / Я надеюсь, что это кому-нибудь поможет. Извините за то, что кто-то пытался помочь мне тратить ваше время.

9

Другие решения

Я знаю, что это уже так давно, но поместив этот блок кода в ваш package.json файл правильно скомпилирует.

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

Теперь вы можете снова запустить gulp

3

Похоже, вы смешиваете свои шаблоны и код Javascript.

В main.js, ты делаешь это:

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

require предназначен для импорта модулей Javascript, чтобы код в одном модуле можно было использовать в другом. components/skills.vue это не файл Javascript, это HTML. Таким образом, интерпретатор Javascript задыхается от этого.

Вам нужно будет переписать skills.vue разоблачить Javascript. HTML должен (вероятно) быть перенесен в шаблон блейда — я говорю, вероятно, потому что, похоже, вы пытаетесь использовать систему шаблонов Javascript с Vue, с которой у меня мало опыта (и я не вижу любые доказательства в коде вы разместили).

РЕДАКТИРОВАТЬ

Я никогда не использовал 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 расширение в моем коде. Не похоже, что ты это делаешь.

Надеюсь, это поможет!

2
По вопросам рекламы [email protected]