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 行时，屏幕截图中出现错误。

Googlemap 组件是：

<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

从 Node 12x 更新到 Node 14x 对我有用

Answer 2

你很可能错过了转译

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

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

Answer 3

通常它指的是来自请求的响应，它期望一个 JSON 对象，但返回的是 HTML。 < 指的是<!DOCTYPE... 或类似的第一个字符。

检查从您正在使用的 API 或其他服务返回的响应。