Nuxt：意外的令牌 <

Question

我正在做一个 nuxt 项目，我正在尝试使用谷歌地图和插件https://www.npmjs.com/package/vue2-google-maps构建一个地图组件。我已经使用 npm 安装了插件

在我的 index.html 页面中，我有一个正常工作的页面，如下所示：

<template>
   <div>

<br>
<br>
       <Card/>
<br>
<br>
<br>
<br>
       <!-- <Googlemap/> -->
       <Panel/>
       <Four/>
       </div> 
</template>

<script>

import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
// import GoogleMap from '~/components/googleMap.vue'


export default {

  components: {

    Panel,
    Card,
//     GoogleMap
  }

}
</script>

当我取消注释其中包含 Googlemap 的 3 行时，屏幕截图中出现错误。

谷歌地图组件是：

<template>
  <GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>

</template>


<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "MYTOKEN",
    libraries: "places"
  }
});

export default {

}

</script>


<style>

</style>

我究竟做错了什么？

编辑：

Answer 1

很可能你错过了转译

https://github.com/xkjyeah/vue-google-maps/blob/0985d475496083f2459db2960ba8f9317aab50ef/README.md#nuxtjs-config

transpile: [/^vue2-google-maps($|\/)/]