Vite导入不存在文件时如何避免控制台显示404错误？

在Vite中，动态导入不存在的文件时出现404网络错误，是因为Vite基于原生ESM运行，浏览器会直接发起对应文件的网络请求；而Webpack在构建阶段会对动态导入做特殊处理，不会发起无效请求。要避免控制台出现404错误，核心思路是提前判断目标文件是否存在，仅当存在时才执行导入操作，具体可通过Vite提供的import.meta.glob实现：

步骤1：预扫描所有可能的配置文件 #

使用import.meta.glob匹配项目中所有符合规则的配置文件，这个API会在构建/开发阶段收集匹配的文件路径：

// 匹配所有子目录下的config.js/ts文件，根据实际后缀调整
const configModules = import.meta.glob('./**/config.{js,ts}', { eager: false })

• ./**/config.{js,ts}：匹配当前文件目录下所有子目录中的config.js或config.ts文件，路径规则需根据你的项目结构调整
• { eager: false }：设置为懒加载模式，不会立即导入所有文件，仅在需要时加载

步骤2：动态导入前检查文件是否存在 #

在需要导入配置的地方，先检查目标路径是否在预扫描的模块列表中，仅存在时才执行导入：

async function loadConfig(path, config = 'config') {
  // 拼接目标文件路径，需和glob匹配的格式一致（比如加上后缀）
  const targetModulePath = `./${path}/${config}.js` // 根据实际后缀调整为.js或.ts
  let configData = {}
  
  if (configModules[targetModulePath]) {
    // 文件存在时才执行导入
    configData = (await configModules[targetModulePath]()).default || {}
  }
  
  return configData
}

为什么这个方法有效？ #

import.meta.glob会在Vite的构建/开发阶段生成所有匹配文件的映射，运行时可以直接通过路径判断文件是否存在，避免发起无效的网络请求，自然就不会出现404错误日志。

注意事项 #

• 确保targetModulePath的格式和import.meta.glob的匹配规则完全一致，比如路径的相对关系、文件后缀
• 如果你的配置文件有多种命名或后缀，需要调整glob的匹配模式，比如./**/*config.{js,ts}匹配所有带config的文件

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