Laravel Elixir Browserify失败!:意外的令牌


Laravel Elixir Browserify Failed!: Unexpected token

我正在使用Laravel 5.2,
我正在使用laravel-elixir编译这个vue组件:
https://github.com/sagalbot/vue-select

这是我的gulpfile.js:
gullfile.js

var elixir = require('laravel-elixir');
elixir(function(mix) {
     mix.browserify('main.js', 'public/js/vue-select/main.js');
});

这是使用gulp命令的错误消息:
错误:

$ gulp
[23:19:18] Using gulpfile D:'wnmp'www'laravel-entrust'gulpfile.js
[23:19:18] Starting 'default'...
[23:19:18] Starting 'browserify'...
Fetching Browserify Source Files...
   - resources'assets'js'main.js

Saving To...
   - public/js/vue-select/main.js
[23:19:19] Finished 'default' after 538 ms
[23:19:19] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token
D:'wnmp'www'laravel-entrust'resources'assets'js'App.vue:1
<style lang="scss">
^
ParseError: Unexpected token
[23:19:19] Finished 'browserify' after 846 ms
[23:19:20] gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module 'vue' from 'D:'wnmp'www'laravel-entrust'resources'assets'js'
{ [Error: Cannot find module 'vue' from 'D:'wnmp'www'laravel-entrust'resources'assets'js']
  stream:
   Labeled {
     _readableState:
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: false,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }
[23:19:20] gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module 'vuex' from 'D:'wnmp'www'laravel-entrust'resources'assets'js'vuex'
{ [Error: Cannot find module 'vuex' from 'D:'wnmp'www'laravel-entrust'resources'assets'js'vuex']
  stream:
   Labeled {
     _readableState:
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: false,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }
[23:19:20] gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module 'vue' from 'D:'wnmp'www'laravel-entrust'resources'assets'js'vuex'
{ [Error: Cannot find module 'vue' from 'D:'wnmp'www'laravel-entrust'resources'assets'js'vuex']
  stream:
   Labeled {
     _readableState:
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: false,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }

我该怎么办?

您需要Elixir的官方"Vueify"包装:

npm install laravel-elixir-vueify

然后,在您的gulpfile.js:中

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
    mix.browserify('main.js');
});

如果你使用的是Elixir 5或更低版本,你需要一个更低版本的包装:

npm install laravel-elixir-vueify@1.0.6