Javascript VueJS组件导入失败

我有一个简单的演示，我想尝试了解有关VueJS组件的更多信息。但是当我加载我的页面时，我收到了错误：意外的令牌导入，在这一行

从“/components/GISView.vue”导入GISView

当我删除它时，没有定义GISView。我使用Laravel5.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>

从“../mixins/GoogleMaps.js”导入谷歌地图；
导出默认值{
mixins:[谷歌地图]
}

---

我真的在这个问题上纠结了好几个小时，因为我想说的是，仅凭代码就可以了。

您没有使用像vueify这样的正确解析器来正确解析webpack/gulp脚本中的.vue文件。

我该如何添加它？请参阅我自己问题的答案：这是不正确的。OP似乎没有使用gulp，可以更轻松地将vue loader over vueify转换为网页包管道。此外，这实际上并没有回答OP的问题，充其量只是一个评论。有人有想法吗？@DavidL这肯定不完整，但不需要否决投票。对于他的构建过程，他需要一个等价的解决方案。在他公布具体内容之前，我没有办法改进我的答案。。事实上，如果他使用的是gulp，那么我的答案很可能是正确的。请在你的网页配置的loaders部分发布