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的地方，或者我只需要像我一样安装它？

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)表示我需要在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');
});

我认为elixir已经与vueify兼容：/我希望这可以帮助任何人。抱歉让那些试图帮助我的人浪费你的时间。

Answer 2

我知道这已经很久以前了，但是将这个代码块放在package.json文件中会正确编译它。

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

现在您可以再次运行gulp

Answer 3

您似乎正在混淆模板和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扩展名的模块。你似乎没有这样做。

希望有所帮助！

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

3 个答案: