VUE3 + VITE 动态导入路由 报错 解决方法

业务需要实现地图下钻功能，在本机上运行并不会报错，console.log(data) 输出为

查看本机VITE版本：vite@5.3.5

// 获取地图数据
const getMapJSON = async (adcode = '440000', geoName?: string) => {
    try {
        // 动态加载地图 JSON 数据
        const GeoJson = await import(`@/assets/maps/${adcode}.json`);
        const data = GeoJson.default;
        console.log(data);

        console.log(`获取地图数据${adcode}${geoName ? `, 地名: ${geoName}` : ''}`);
        echarts.registerMap(geoName || adcode, data); // 确保 geoName 不为空

        // 处理地图数据
        const mapData = data.features.map((item) => {
            return {
                value: item.properties.adcode,
                name: item.properties.name,
            };
        });
        return mapData;
    } catch (error) {
        console.error('加载地图数据失败:', error);
    }
};

将该代码迁移到已有项目中时出现了问题。

• vscode的template出现了两个警告：

1. [vite] warning: Unexpected token (1:13) Plugin: vite:dynamic-import-vars
2. [vite] warning:The above dynamic import cannot be analyzed by Vite.
   See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
   *按照一些教程说的加上/* @vite-ignore */并没有使问题得到解决

• 在浏览器运行后发现地图数据未能正常导入

• 查看VITE版本为vite@3.1.7

• 将代码替换为，问题解决

/*
// 被替换代码
 const GeoJson = await import(`@/assets/maps/${adcode}.json`);
const data = GeoJson.default;
console.log(data);
*/

const path = `/src/assets/maps/${adcode}.json`;
const GeoJson = import.meta.glob(`/src/assets/maps/*.json`);
const result = await GeoJson[path]();
console.log(result.default);
const data = result.default;

**踩雷提醒：一开始用了@/也会出问题，用绝对路径后问题解决**

---

参照了VITE官方文档：功能 | Vite 官方中文文档 (vitejs.dev)