带有 No-SSR 的 Vue2-Leaflet 导致 Window is not defined 错误

Question

我现在一直在尝试很多东西。我试过 nuxt-leaflet 依赖，我试过编写自己的插件并将其包含在内。但是，一切都以 "window is not defined" 错误结束。

地图只能在客户端加载。

我的 vue 组件：

 <template>
        <no-ssr>
            <l-map
                    id="map"
                    :zoom="zoom"
                    :min-zoom="3"
                    :center="center"
            >

            </l-map>
        </no-ssr>
 </template>

<script lang="ts">
    import Vue from 'vue';
    import {latLng, marker} from 'leaflet';
    import {ExploreItemType} from '~/components/explore/ExploreItem';
    import {Component} from "nuxt-property-decorator";

    @Component()
    export default class ExplorerMap extends Vue {

        url = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2dydWVuZWJlcmciLCJhIjoiY2puajJ3c3dmMGV1YzNxbDdwZ3Y5MXc0bCJ9.kuHo67NUkzqya1NtSjTYtw';
        attribution = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
        zoom = 3;
        center = latLng(51.505, -0.09);
        drawCluster = true;

    }
</script>

所以我在plugins/vue-leaflet.ts

中写了自己的插件

import Vue from 'vue'
import Vue2Leaflet from 'vue2-leaflet'
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';

Vue.component('l-circle', Vue2Leaflet.LCircle);
Vue.component('l-geo-json', Vue2Leaflet.LGeoJson);
Vue.component('l-icon-default', Vue2Leaflet.LIconDefault);
Vue.component('l-layer-group', Vue2Leaflet.LLayerGroup);
Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-marker', Vue2Leaflet.LMarker);
Vue.component('l-popup', Vue2Leaflet.LPopup);
Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer);
Vue.component('l-tooltip', Vue2Leaflet.LTooltip);

并将其包含在 nuxt.config.js

{src: "~/plugins/vue-leaflet.ts", ssr: false}

无论我尝试过什么，我总是以 window is not defined 错误告终。我没主意了。

Answer 1

这是因为在你的组件中你做了

import {latLng, marker} from 'leaflet';

这可能会做一些 window 检查并立即失败。因此，您需要使用 if (process.client) check

有条件地导入它

Answer 2

多亏了 Aldarund 的提示，我才开始工作：

<template>

    <div>
        <no-ssr>
            <l-map
                    id="map"
                    :zoom="zoom"
                    :min-zoom="3"
                    :center="center"
            >
                <l-tile-layer :url="url" :attribution="attribution"/>
               ....
            </l-map>
        </no-ssr>
    </div>
</template>

<script lang="ts">
    const isBrowser = typeof window !== 'undefined';
    let leaflet;
    if (isBrowser) {
        leaflet = require('leaflet');
    }
    import Vue from 'vue';

    import {Component, Prop, Watch} from "nuxt-property-decorator";

    @Component({})
    export default class ExplorerMap extends Vue {

        url = 'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2dydWVuZWJlcmciLCJhIjoiY2puajJ3c3dmMGV1YzNxbDdwZ3Y5MXc0bCJ9.kuHo67NUkzqya1NtSjTYtw';
        attribution = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
        zoom = 3;
        center;

        created() {
            if (isBrowser) {
                this.center = leaflet.latLng(51.505, -0.09);
            }
....
}

带有 No-SSR 的 Vue2-Leaflet 导致 Window is not defined 错误

Vue2-Leaflet with No-SSR causes Window is not defined error

leaflet

vue.js

server-side-rendering

nuxt.js