如何在Nuxt3项目中正确配置引入vue3-openlayers插件？

• 第一步：安装项目依赖

# 使用npm
npm install vue3-openlayers
# 使用pnpm
pnpm add vue3-openlayers
# 使用yarn
yarn add vue3-openlayers

• 第二步：在项目根目录的plugins文件夹下，新建名为vue3-openlayers.client.ts的文件（.client后缀表示该插件仅在客户端执行，避免服务端渲染时报找不到window对象的错误），写入以下内容：

import OpenLayersMap from "vue3-openlayers";
import "vue3-openlayers/dist/vue3-openlayers.css";

export default defineNuxtPlugin((nuxtApp) => {
  // 对应原Vue3项目中的app.use(OpenLayersMap)注册逻辑
  nuxtApp.vueApp.use(OpenLayersMap);
});

Nuxt3会自动扫描plugins目录下的所有文件并完成插件注册，无需额外配置。

• 第三步：在页面/组件中使用地图组件时，建议用Nuxt内置的<ClientOnly>组件包裹，避免服务端渲染和客户端内容不匹配的问题，示例代码：

<template>
  <div>
    <ClientOnly fallback="地图加载中...">
      <ol-map style="height: 500px; width: 100%">
        <ol-view :center="[116.3972, 39.9075]" :zoom="10" projection="EPSG:4326" />
        <ol-layer-tile>
          <ol-source-osm />
        </ol-layer-tile>
      </ol-map>
    </ClientOnly>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Philip F.