Question

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

这是我的gulpfile.js：
gulpfile.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' } }

我该怎么办？

Answer 1

你需要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

Laravel Elixir Browserify失败！：意外的令牌

1 个答案: