未定义nuxt vue3传单窗口

Question

我正在尝试将我现有的SPA应用程序迁移到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-传单或Vue -传单，因为他们不使用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" />

可能不完美，但很管用。

Answer 2

在SSR模式下，服务器没有window对象。您需要等待发生在客户端的"onMounted“事件，这意味着窗口对象是可用的。我环顾四周，发现这个图书馆与Vue 3兼容，但是如果您只想导入经典的javascript库，您仍然会发现“使用传单”一节很有帮助。