Quasar/Vue+TypeScript中使用变量名动态导入JSON文件问题

问题原因 #

webpack处理动态导入时，需要能静态识别文件的路径范围。如果导入路径完全依赖变量拼接，webpack无法确定要打包哪些JSON文件，因此不会将对应文件纳入构建产物，导致运行时出现资源找不到的错误。

解决方案 #

方法1：使用require.context批量导入（推荐） #

这是webpack提供的批量导入API，可让webpack打包指定目录下所有符合规则的文件，之后能通过文件名动态获取对应数据，非常适合几百个JSON文件的场景。

// 在Vue组件脚本中使用
const jsonContext = require.context('src/assets', false, /\.json$/);

// 定义根据文件名获取JSON的函数
const getJsonData = (fileName: string) => {
  try {
    // 路径格式需匹配context的目录规则，这里是相对context目录的路径
    return jsonContext(`./${fileName}.json`);
  } catch (error) {
    console.error(`加载文件 ${fileName}.json 失败:`, error);
    return null;
  }
};

// 使用示例
const myData = getJsonData('myData');
console.log(myData);

参数说明：

• 'src/assets'：要批量导入的目录（支持Quasar默认配置的src别名）
• false：是否递归查找子目录，不需要则设为false
• /\.json$/：匹配文件名的正则，仅筛选后缀为.json的文件

方法2：调整动态导入写法，给webpack静态提示 #

如果坚持使用import()语法，需确保路径包含足够的静态部分，让webpack明确要打包指定目录下的所有JSON文件：

// 固定目录前缀，webpack会打包src/assets下所有.json文件
const fileName = 'myData';
import(`src/assets/${fileName}.json`).then(({ default: data }) => {
  console.log(data);
});

注意：若使用相对路径（比如组件在src/components目录下，写../assets/${fileName}.json），也能让webpack正确识别路径范围。

方法3：预生成导入映射（适合预加载所有文件的场景） #

如果需要一次性加载所有JSON文件，可以先批量导入并生成映射表，之后直接通过文件名获取数据：

const jsonContext = require.context('src/assets', false, /\.json$/);

// 生成文件名到JSON数据的映射表
const jsonMap: Record<string, any> = {};
jsonContext.keys().forEach(key => {
  // 提取纯文件名（去除"./"和".json"后缀）
  const fileName = key.replace(/^\.\/(.*)\.json$/, '$1');
  jsonMap[fileName] = jsonContext(key);
});

// 使用示例
console.log(jsonMap['myData']);

内容的提问来源于stack exchange，提问作者cmihran