Laravel 5.3とVue Webpackの設定

Question

こんにちは、app.jsでJSエラーが発生しています。基本的には、require（ './ bootstrap'）が好きではありません。そして、エラーを与える：私も持っている

<template> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2"> 
        <div class="panel panel-default"> 
         <div class="panel-heading">Example Component</div> 

         <div class="panel-body"> 
          I'm an example component! 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </template> 

<script> 
    export default { 
     mounted() { 
      console.log('Component ready.') 
     } 
    } 
</script> 

：

all.js:50750 Uncaught ReferenceError: require is not defined 

マイapp.js：

/** 
* First we will load all of this project's JavaScript dependencies which 
* include Vue and Vue Resource. This gives a great starting point for 
* building robust, powerful web applications using Vue and Laravel. 
*/ 

require('./bootstrap'); 

/** 
* Next, we will create a fresh Vue application instance and attach it to 
* the page. Then, you may begin adding components to this application 
* or customize the JavaScript scaffolding to fit your unique needs. 
*/ 

Vue.component('example', require('./components/Example.vue')); 

const app = new Vue({ 
    el: '#app' 
}); 

私のpackage.json：

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "bootstrap-sass": "^3.3.7", 
    "buble": "^0.13.2", 
    "buble-loader": "^0.3.1", 
    "css-loader": "^0.25.0", 
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0", 
    "laravel-elixir": "^6.0.0-11", 
    "laravel-elixir-vue-2": "^0.2.0", 
    "laravel-elixir-webpack-official": "^1.0.2", 
    "lodash": "^4.16.2", 
    "style-loader": "^0.13.1", 
    "vue": "^2.0.3", 
    "vue-hot-reload-api": "^1.2.0", 
    "vue-html-loader": "^1.2.3", 
    "vue-loader": "^9.7.0", 
    "vue-resource": "^1.0.3", 
    "vue-style-loader": "^1.0.0", 
    "webpack": "^1.13.2" 
    } 
} 

Example.Vue a webpack.config.js：

'use strict' 

const path = require('path') 

module.exports = { 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       include: path.join(__dirname, 'resources/assets'), 
       exclude: /node_modules/, 
       loader: 'buble', 
      }, 
      { 
       test: /\.vue$/, 
       loader: 'vue', 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style!css' 
      }, 
     ] 
    }, 
} 

bootstrap.jsは、私はこれに時間を費やしていると私はbrowserifyの間で混乱していて、ウェブ上のドキュメントは非常に明確ではありません

window._ = require('lodash'); 

/** 
* We'll load jQuery and the Bootstrap jQuery plugin which provides support 
* for JavaScript based Bootstrap features such as modals and tabs. This 
* code may be modified to fit the specific needs of your application. 
*/ 

window.$ = window.jQuery = require('jquery'); 
require('bootstrap-sass'); 

/** 
* Vue is a modern JavaScript library for building interactive web interfaces 
* using reactive data binding and reusable components. Vue's API is clean 
* and simple, leaving you to focus on building your next great project. 
*/ 

window.Vue = require('vue'); 
require('vue-resource'); 

/** 
* We'll register a HTTP interceptor to attach the "CSRF" header to each of 
* the outgoing requests issued by this application. The CSRF middleware 
* included with Laravel will automatically verify the header's value. 
*/ 

Vue.http.interceptors.push((request, next) => { 
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken); 

    next(); 
}); 

/** 
* Echo exposes an expressive API for subscribing to channels and listening 
* for events that are broadcast by Laravel. Echo and event broadcasting 
* allows your team to easily build robust real-time web applications. 
*/ 

// import Echo from "laravel-echo" 

// window.Echo = new Echo({ 
//  broadcaster: 'pusher', 
//  key: 'your-pusher-key' 
// }); 

私gulpfile.js

const elixir = require('laravel-elixir'); 

require('laravel-elixir-webpack-official'); 

/* 
|-------------------------------------------------------------------------- 
| Elixir Asset Management 
|-------------------------------------------------------------------------- 
| 
| Elixir provides a clean, fluent API for defining some basic Gulp tasks 
| for your Laravel application. By default, we are compiling the Sass 
| file for our application, as well as publishing vendor resources. 
| 
*/ 
var paths = { 
    'cssstyles': 'resources/assets/css/', 
    'jsscripts': 'resources/assets/js/', 

    'adminlte': 'vendor/bower_components/AdminLTE/', 
    'bootstrap': 'vendor/bower_components/bootstrap/', 
    'chartjs': 'vendor/bower_components/Chart.js/dist/', 
    'fastclick': 'vendor/bower_components/fastclick/', 
    'fontawesome': 'vendor/bower_components/font-awesome/', 
    'jquery': 'vendor/bower_components/jquery/', 
    'slimscroll': 'vendor/bower_components/slimScroll/', 
    'datatables': 'vendor/bower_components/datatables.net/', 
    'moment': 'vendor/bower_components/moment/', 
    'bootstrapgrowl': 'vendor/bower_components/bootstrap-growl/' 
} 

elixir.config.sourcemaps = false; 


elixir(function(mix) { 
    mix.sass('app.scss', paths.cssstyles) 
     .styles([ 
      paths.bootstrap + 'dist/css/bootstrap.css', 
      paths.fontawesome + 'css/font-awesome.css', 
      paths.adminlte + 'plugins/datatables/dataTables.bootstrap.css', 
      paths.adminlte + 'dist/css/AdminLTE.css', 
      paths.adminlte + 'dist/css/skins/skin-blue.css', 
      paths.adminlte + 'plugins/select2/select2.css', 
      paths.cssstyles + 'dataTables.fontAwesome.css', 
      paths.cssstyles + 'app.css' 
     ], 'public/css/', './') 

     .scripts([ 
      paths.jquery + "dist/jquery.js", 
      paths.moment + 'moment.js', 
      paths.bootstrap + "dist/js/bootstrap.js", 
      paths.datatables + "js/jquery.dataTables.js", 
      paths.fastclick + "lib/fastclick.js", 
      paths.adminlte + "dist/js/app.js", 
      paths.adminlte + 'plugins/daterangepicker/daterangepicker.js', 
      paths.adminlte + 'plugins/select2/select2.js', 
      paths.adminlte + 'plugins/datatables/dataTables.bootstrap.js', 
      paths.slimscroll + "jquery.slimscroll.js", 
      paths.chartjs + "Chart.js", 
      paths.bootstrapgrowl + 'jquery.bootstrap-growl.js', 
      paths.jsscripts + "app.js" 
     ], 'public/js/', './') 


    mix.webpack('app.js'); 

}); 

を提出しますとwebpack。私は非常にフロントエンドに精通していないと述べたいと思います。将来的にVueを利用できるように、順番に物事をしたいだけです。ご協力いただきありがとうございます。

Answer 1

だからダム。私は生成されたJSファイルを含めていませんでした。これで刺し傷を負ったみんなに感謝します。