我正在尝试在VueJS3应用程序中显示交互式Map。
我找到了一个有效的代码：

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

<script>
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

export default {
  name: 'LeafletMap',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.map = L.map('mapContainer').setView([46.05, 11.05], 5);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(this.map);
    //use a mix of renderers
    var customPane = this.map.createPane('customPane');
    var canvasRenderer = L.canvas({ pane: 'customPane' });
    customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400
    L.marker([50, 14]).addTo(this.map);

    L.marker([53, 20]).addTo(this.map);
    L.marker([49.5, 19.5]).addTo(this.map);
    L.marker([49, 25]).addTo(this.map);
    L.marker([-10, 25]).addTo(this.map);
    L.marker([10, -25]).addTo(this.map);
    L.marker([0, 0]).addTo(this.map);
  },
  onBeforeUnmount() {
    if (this.map) {
      this.map.remove();
    }
  },
};
</script>

<style scoped>
#mapContainer {
  width: 100vw;
  height: 100vh;
}
</style>

但只要我导入一个自定义的geoJSON，就像这样：

import France from '@/assets/carto/France.geojson';

我的控制台中有以下内容：
[Vue路由器警告]：路线导航期间未捕获错误：语法错误：意外内标识：[Vue路由器警告]：启动路由器时出现意外错误：语法错误：意外内标识：“：”未捕获（在承诺中）语法错误：意外内标识：“：”法国.geojson：2：8
有什么不对吗？
顺便说一下，France.geoJSON是一个经典的geoJSON文件：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [5.829184048326689, 45.93827339383888], ...
          ]
        ]
      },
      "properties": { "dep": "01", "reg": "84", "libgeo": "Ain" }
    }, ...