Vite React项目生产构建中Glob导入失效问题求助

云上老周

2026-7-25

问题分析

开发环境中import.meta.glob返回的是文件原始相对路径，直接fetch能正常访问；但生产构建时，Vite会对静态资源做路径重写和哈希处理，原目录结构的md文件会被打包到dist/assets下且文件名带哈希，此时再用原始路径fetch必然出现404。你之前添加的external配置完全不适用于这个场景——它是用来排除外部依赖的，和内部静态资源无关。

解决方案

直接通过import.meta.glob导入md文件内容，而非获取路径后用fetch请求，具体有两种实现方式：

方式一：同步导入（适合文件数量少的场景）

const useGetChangelogs = () => {
  // 直接导入所有md文件的原始文本内容，eager: true 表示同步加载
  const changelogModules = import.meta.glob("~/changelogs/*.md", { eager: true, as: "raw" });
  
  // 按文件路径倒序排序，提取文本内容
  const changelogs = Object.entries(changelogModules)
    .sort(([pathA], [pathB]) => pathB.localeCompare(pathA))
    .map(([, content]) => content as string);

  return changelogs;
};

方式二：异步导入（适合文件数量多，需要懒加载的场景）

const useGetChangelogs = () => {
  const [changelogs, setChangelogs] = useState<string[]>([]);

  useEffect(() => {
    const loadChangelogs = async () => {
      // 获取所有md文件的异步导入函数，as: "raw" 指定导入文本内容
      const changelogImports = import.meta.glob("~/changelogs/*.md", { as: "raw" });
      // 按文件路径倒序排序
      const sortedPaths = Object.keys(changelogImports).sort((a, b) => b.localeCompare(a));
      // 批量执行导入并获取内容
      const contents = await Promise.all(
        sortedPaths.map(path => changelogImports[path]())
      );
      setChangelogs(contents);
    };

    loadChangelogs().catch(err => console.error(err));
  }, []);

  return changelogs;
};

后续确认