Vue.js Ressource arbeiten nicht mit Laravel 5.3 out-of-box Config

Question

Arbeiten mit frisch von Laravel installieren 5.3 mit Vue.js enthalten und Out-of-the-box konfiguriert:

this.$http.get(url) kehrt Fehler:

TypeError: this$1.$http is undefined

Ersetzen dass mit Vue.http.get(url)... die Anforderung macht aber nicht Preflight-Optionen an:

missing token ‘x-csrf-token’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel

app.js:

require('./bootstrap'); 
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content'); 

let app = new Vue({ 
     el: '#app', 

     mounted:() => { 
      navigator.geolocation.getCurrentPosition((position) => { 
       app.getZip(position); 
      }); 
     }, 

     methods: { 
      getZip: (position) => { 
       let lat = position.coords.latitude; 
       let long = position.coords.longitude; 
       let url = encodeURI(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&sensor=false`); 
       Vue.http.get(url).then((response) => { 
        let zip = response.body.results[0].address_components[5].short_name; 
        console.log(zip); 
       }); 
      }, 
     }, 
    }); 

bootstrap.js:

window._ = require('lodash'); 

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

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

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

    next(); 
}); 

Relevante app.blade.php:

<meta id="token" name="csrf-token" content="{{ csrf_token() }}"> 
<script> 
     window.Laravel = <?php echo json_encode([ 
      'csrfToken' => csrf_token(), 
     ]); ?> 
</script> 

<script src="/js/app.js"></script> 

gulpfile.js:

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

require('laravel-elixir-vue-2'); 

elixir(mix => { 
    mix.sass('app.scss') 
     .webpack('app.js'); 
}); 

Wenn ich <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script> umfassen wird es erfolgreich machen die Anfrage mit beiden:

Vue.http.get(url) 
this.$http.get(url) 

Warum funktioniert das nicht mit dem node_module? require('vue-resource')

Answer 1

Es ist, weil Sie benötigen. Wenn Sie "require" benötigen, benötigen Sie eine Bibliothek wie browserify oder webpack, die es uns ermöglicht, node.js-style-Module zu verwenden, die für die Verwendung im Browser kompiliert werden.