錯誤：模塊構建失敗（來自 ./node_modules/babel-loader/lib/index.js）：語法錯誤：

Question

我想在我的VueJs項目中使用 Google Map Javascript API ，而不使用這個包https://www.npmjs.com/package/vue2-google-maps （因為我認為它太有限了）。

因此，在app.js中注冊了我的Vue component之后，我所做的就是：

    require('./bootstrap');

    window.Vue = require('vue');

    const app = new Vue({
        el: '#app',
     });

    Vue.component(
       'map-component',
       require('./components/MapComponent.vue').default
     );

在MapComponent.vue

            <template>

              <div id="map"></div>


            </template>

            <script>

              export default {

                data: function() {
                  return {
                  }
                },
                created() {
                  let googleApi = document.createElement('script');
                  googleApi.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA.......S-3SvLw_-twW72Zg&callback='+this.initMap+'');
                  document.head.appendChild(googleApi);
                },
                mounted() {
                  initMap: function() {
                    var map;
                    map = new google.maps.Map(document.getElementById('map'), {
                      center: {lat: -34.397, lng: 150.644},
                      zoom: 8
                    });
                  }

                },

              }

            </script>

我也嘗試將created()與mounted()切換，但它顯示相同的錯誤

沒有錯誤的結果應該在頁面上顯示谷歌地圖。

謝謝你的幫助

艾美瑞克

Answer 1

在 Created this.initMap() = function() { ... } 中試試這個

您的代碼將無法工作，因為您正在嘗試訪問尚未初始化的變量。 在 Vue 中，首先執行創建的方法，然后執行掛載的方法。

更多信息在這里： https ://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks