在Nuxt/Vue中安装传单的正确方法

我试图在我的Nuxt 3项目中安装传单,而不使用@nuxtjs/parlear等包装器,但它说“找不到模块‘传单’的声明文件,尽管我安装了 leaflet 来自npm的包。

//template
<div id="map"></div>

//script
<script setup lang="ts">
import * as L from "leaflet";

onMounted(() => {
    const map = L.map("map").setView([34.299074, -118.45949], 13);
    L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 19,
        attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    }).addTo(map);
    L.marker([34.299074, -118.45949]).addTo(map);
});
</script>

然后我在nuxt.config.ts中添加一个css文件:

css: [
    "leaflet/dist/leaflet.css",
],

我现在得到的只是一张带有放大/缩小按钮的空地图,右下角有标题“传单|开放街道地图”。

这是复制品: https://stackblitz.com/edit/nuxt-starter-jcj5xn?file=app%2Fpages%2Findex.vue,app%2Fapp.vue,app%2Fpages%2Fevents.vue 。如果您单击“转到活动”链接,将打开空白地图。如果重新加载页面,则会出现未定义“窗口”的错误。在我的实际项目中,我甚至不能拖动地图,也没有标记。此外,它一直在说“试图加载无限数量的图块”,尽管 https://tile.openstreetmap.org/{z}/{x}/{y}.png 根据官方文件,这是一个正确的tileLayer leafletjs.com/examples/quick-start .

寻找一个可能的解决方案。