VueJS組件導入失敗

Question

我有一個簡單的演示，我想嘗試了解有關VueJS組件的更多信息。 但是，當我加載頁面時，在此行中收到錯誤：意外的令牌導入

從'./components/GISView.vue'導入GISView；

當我刪除它時，未定義GISView。 我使用Laravel 5.4和webpack來編譯腳本。 為什么找不到組件？

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>

我確實為此花了幾個小時，因為僅憑代碼，它就可以正常工作。

Answer 1

您沒有使用像vueify之類的適當解析器來正確解析webpack / gulp腳本中的.vue文件。