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

Posted 2023-02-22

【中文标题】Laravel Elixir Browserify 失败！：意外令牌 - 使用 VueJs

【英文标题】：Laravel Elixir Browserify Failed!: Unexpected token - Using VueJs

【发布时间】：2016-03-17 10:41:15

【问题描述】：

谁能帮我解决这个问题？我正在尝试学习如何使用 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 install 吗？

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>

【参考方案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 兼容：/ 我希望这对任何人都有帮助。很抱歉让试图帮助我的人浪费了你的时间。

【讨论】：

我也有同样的问题，但我的gulpfile.js 上有一行。有什么猜测吗？

【参考方案2】：

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

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

现在你可以再次运行gulp

【讨论】：

由于某种原因，我的 gulpfile 中需要 laravel-elixir-vueify 引发了错误，但您的解决方案完美运行！

【参考方案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 扩展名的模块。你似乎没有这样做。

希望有帮助！

【讨论】：

我想这就是 vueify 应该做的，检查 github.com/vuejs/vueify 我已经检查了一些例子，就我搜索而言，我和其他人一样 xD github.com/vuejs/vueify-example

谢谢你，你有点引导我找到答案。我发现这个 repo 解释了我需要添加什么来使 vueify 工作github.com/JeffreyWay/laravel-elixir-vueify