VueJS Component-Import fehlgeschlagen

Question

Ich habe eine einfache Demo, die ich ausprobieren möchte, um mehr über VueJS-Komponenten zu erfahren. Aber wenn ich meine Seite lade, erhalte ich den Fehler: Unerwarteter Token-Import, in dieser Zeile

importieren Sie GISView von './components/GISView.vue';

Wenn ich dies entferne, ist GISView nicht definiert. Ich verwende Laravel 5.4 und Webpack zum Kompilieren der Skripte. Warum wird die Komponente nicht gefunden?

main.js

import GISView from './components/GISView.vue'; 

window.Vue = Vue; 
window.Event = new class { 
    constructor() { 
     this.Vue = new Vue(); 
    } 

    fire(event, data = null) { 
     this.Vue.$emit(event, data); 
    } 

    listen(event, callback) { 
     this.Vue.$on(event, callback); 
    } 
}; 

window.app = new Vue({ 
    el: '#app', 
    components: { 
     GISView: GISView 
    }, 
    data: { 
    }, 
    methods: { 
     init: function() { 
      this.$broadcast('MapsApiLoaded'); 
     } 
    } 
}); 

GISView.vue

<script> 
    import GoogleMaps from '../mixins/GoogleMaps.js'; 

    export default { 
     mixins: [GoogleMaps] 
    } 
</script> 

Ich habe wirklich stundenlang auf diese stecken, weil nur durch den Code, sollte es funktionieren würde ich sagen.

Answer 1

Sie verwenden keinen geeigneten Parser wie vueify, um .vue-Dateien in Ihrem webpack/gulp-Skript richtig zu analysieren.