错误：模块构建失败（来自 ./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