VueJS組件導入失敗

我有一個簡單的演示，我想嘗試瞭解更多關於VueJS組件。但是當我加載我的頁面時，我收到錯誤：意外的令牌導入，在這一行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>

我真的卡住了關於這個小時，因爲剛剛通過的代碼，它應該工作，我會說。

來源

2017-05-09 sesc360

請發佈您的webpack config的加載器部分 –

-3

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

來源

2017-05-09 23:47:48

我該如何添加？ – sesc360

在這裏看到我自己的問題的答案：http://stackoverflow.com/questions/42005463/vueify-in-gulp-task-with-babel-transform-of-vue-files/42028255#42028255 –

這是不正確的。 OP似乎沒有使用gulp，並且能夠更加輕鬆地將vue-loader過濾爲webpack管道。此外，這實際上並沒有回答OP的問題。最好這是一條評論。 –

VueJS組件導入失敗

回答

相關問題