在预渲染的Vue应用中加载Google Maps API时未定义Google

Question

我正在尝试在Vue APP中加载 Google Maps Javascript API 。但是，当我添加一个prerender插件（ prerender-spa-plugin ）时，JS控制台中出现了一些错误：

• 未捕获的ReferenceError：未在common.js：1上定义google
• 未捕获的ReferenceError：未在stats.js：1上定义google
• 未捕获的ReferenceError： xdc 在vt：1上未定义

起初，我尝试使用 vue2-google-maps 模块。

然后，我尝试异步加载Google Maps API，并且仅在调用回调后才初始化地图。但是，我总是会遇到相同的错误。

Index.html：

<script>
window.mapState = { initMap: false }

function initMap () {
  console.log("Google maps api is loaded...");
  window.mapState.initMap = true
}
</script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={KEY_HERE}&callback=initMap" async defer >
</script>

然后，在组件中初始化Google地图：

methods: {
  loadMap() {
    const map = new window.google.maps.Map(this.$refs.gmaps, options);
  }
},
watch: {
  'mapState.initMap' (isLoaded) {
    if (isLoaded) {
      this.loadMap();
    }
  }
},