nuxt vue3传单窗口未定义

Question

我正在尝试将现有的 SPA Vue 应用程序迁移到 NuxtJS 框架以利用 SSR 的优势。

在我当前的应用程序中，我使用以下指令来加载我的依赖项：

 <script>     
 import L from 'leaflet';
 import '@geoman-io/leaflet-geoman-free';
 import 'leaflet.markercluster';
 import { Tooltip, Carousel } from 'bootstrap'; 
 import 'leaflet-fullscreen';
 import 'leaflet-sidebar';
 import 'leaflet.vectorgrid';
 export default {
  name: 'carte',
  props: ['gps'],
  components: {
    GChart,
  },
  data() {
...
},
...
}
</script>

加载组件时，我从 Nuxt 收到“窗口未定义”错误。

你知道如何克服这个错误吗？如果可能的话，我不想全局加载插件，因为我只需要该组件的这些模块。

请注意，我没有使用 Nuxt-leaflet 或 Vue-leaflet，因为它们不适用于 Vue 3。

多谢！

Answer 1

使用本机传单库，我设法使用以下代码使其工作：

plugins/leaflet.client.ts

import L from 'leaflet'
import 'leaflet.markercluster';
import 'leaflet-fullscreen';
import 'leaflet-sidebar';
import 'leaflet.vectorgrid';
export default defineNuxtPlugin(nuxtApp => {
  return {
      provide: {
        L
      }
    }
})

在我的组件中使用传单：

mounted () {
  // Patch for Vectorgrid with Leaflet >= 1.8
  L.DomEvent.fakeStop = function () {
    return true;
  }
  this.$nextTick(function () {
    this.initcarte();
  })
},

哪里initcarte()：

const map = L.map("map")
map.setView([lat, lng], zoom)

我必须更改我的app.vue参数以在 NuxtPage 中包含一个参数，以强制在路由更改时重新加载组件：

<NuxtPage :key="$route.fullPath" />

可能并不完美，但它正在发挥作用。