传单反应页面的预渲染或 SSG

Question

有没有一种方法可以预渲染一个主要是一个巨大的 leaflet.js 窗口的页面？

窗口始终从相同的坐标开始，因此在构建时准备初始视图以优化页面的加载时间将是有益的。

但此时我已经尝试了一些 SSG 工具/框架，但它们都失败了，通常是由于调用

window

api。 接下来尝试，vite/vike，snap。

该组件看起来或多或少像这样：

import L from "leaflet";
import {
...
} from "react-leaflet";

    <MapContainer
        crs={crs}
        center={startPosition}
        zoom={2}
        scrollWheelZoom={true}
        minZoom={2}
        maxZoom={13}
        zoomControl={false}
        style={{ width: "100%", height: "calc(70vh)" }}
        /* eslint-disable-next-line tailwindcss/no-custom-classname */
      >
        <ZoomControl position="bottomright" />
        <ScaleControl position="bottomleft" />
        <LayersControl position="topright">
          <LayersControl.BaseLayer name="Ortofoto">
            <TileLayer
              minZoom={2}
              maxZoom={13}
              attribution={myAttributionText}
              crossOrigin={true}
              url={`https://services.datafordeler.dk/GeoDanmarkOrto/orto_foraar_wmts/1.0.0/WMTS?username=${datafordelerUsername}&password=${datafordelerPassword}&service=WMTS&request=GetTile&version=1.0.0&Layer=orto_foraar_wmts&style=default&format=image/jpg&TileMatrixSet=KortforsyningTilingDK&TileMatrix={z}&TileRow={y}&TileCol={x}`}
            />
          </LayersControl.BaseLayer />
          <LayersControl.Overlay name="Skoledistrikter">
          <GeoJSON data={districtsJson} />
          </LayersControl.Overlay>
        </LayersControl>
        <MarkerClusterGroup
    
        </MarkerClusterGroup>
      </MapContainer>

Answer 1

我通过将导入放置在 onMounted 函数中，在 Vue 应用程序中解决了这个问题。然后它只在运行时执行。

我没有 React 经验，如果他们有类似的生命周期钩子，你可以将其移到那里。

onMounted(async () => {
  const Leaflet = await import('leaflet')
})