为什么我在nuxt中的`client-only`组件抱怨`window未定义`？

Question

我有要迁移到nuxt的Vue SPA。我在vue2leaflet标记中包含的组件中使用<client-only>，但仍然从nuxt收到一个错误，说window is not defined。

我知道我可以使用nuxt-leaflet或创建一个插件，但这大大增加了供应商捆绑包，我不想要那样。我只想为需要它的组件导入传单插件。有什么办法吗？

<client-only>
   <map></map>
</client-only>

和map组件：

<template>
  <div id="map-container">
    <l-map
      style="height: 80%; width: 100%"
      :zoom="zoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <l-tile-layer :url="url"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import {
  LMap,
  LTileLayer,
  LMarker,
  LFeatureGroup,
  LGeoJson,
  LPolyline,
  LPolygon,
  LControlScale
} from 'vue2-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';

// this part resolve an issue where the markers would not appear
delete Icon.Default.prototype._getIconUrl;

export default {
  name: 'map',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LFeatureGroup,
    LGeoJson,
    LPolyline,
    LPolygon,
    LControlScale
  },
//...

Answer 1

尽管不确定如何，但我找到了一种可行的方法。在父组件中，将import语句移动到组件声明中。

<template>
  <client-only>
    <map/>
  </client-only>
</template>

<script>
export default {
  name: 'parent-component',
  components: {
    'Map': () => import('../components/Map.vue'),
  },
}
</script>

我打算在导入语句中添加一个条件，但是由于某种原因，如果没有条件，它就可以工作。