为什么我的“客户端”组件在nuxt中抱怨“窗口没有定义”？

Question

我有Vue SPA，我正试图迁移到nuxt。我在一个组件中使用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

我找到了一种可行的方法，尽管我不知道该怎么做。在父组件中，将导入语句移动到组件声明中。

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

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

Answer 2

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

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

上面的解决办法对我没有用。

为什么？我花了一段时间才发现，所以我希望它能帮到别人。

“问题”是Nuxt自动包含" Components“文件夹中的组件，因此您不必手动包含它们。这意味着，即使您只在process.client上动态加载它，由于这种自动化，它仍然将加载它的服务器端。

我发现了以下两种解决办法：

1. 将"components“文件夹重命名为其他文件夹，以停止自动导入，然后使用上面的解决方案(process.client)。
2. (和更好的选项，IMO)还有另一个特性来延迟加载自动加载的组件。若要执行此操作，请在组件名称前面加上“懒惰-”。这将防止组件被呈现在服务器端.

最后，您的设置应该类似于以下文件：

./components/map.vue
./pages/index.html

index.html：

    <template>
      <client-only>
        <lazy-map/>
      </client-only>
    </template>
    <script>
    export default {
    }
    </script>

Answer 3

<client-only>组件不执行您认为它所做的事情。是的，它跳过在服务器端呈现组件，但它仍然被执行！

https://deltener.com/blog/common-problems-with-the-nuxt-client-only-component/