webpack动态按需引入文件

在webpack中，无法动态引入文件，给定的文件路径必须是静态的，否则会报错，找不到模块，下面是报错的下发：

async getArea(e) {
    let name = "hubei";
    let map = await import(`@/utils/map/province/${name}.json`);
},

正确的：

async getArea(e) {
    let map = await import(`@/utils/map/province/hubei.json`);
},

在webpack中，动态引入的文件必须是字面量，也就是必须使用静态定义好的路径

如果你有多个文件需要引入，可以提前将路径映射好，然后通过动态取路径的形式引入

export const mapModule = {
    province: {
        hubei: import("@/utils/map/province/hubei.json"),
    },
};

async getArea(e) {
    let name = "hubei";
    let map = await mapModule.province[name];
},

---

更简单的方式：
将指定资源放到public文件中，该文件实际上是线上资源存储文件夹，我们可以通过发送请求的方式来获取public的内容：

引入：

import axios from "axios"; // 引入axios


let name = "hubei";
let map = await axios.get(`/map/province/${name}.json`);