如何在VuePress的Vue组件中动态加载YAML文件为对象

• Webpack 打包阶段会对 require 的路径做静态分析，直接传入完全动态的变量（如 require(this.src)）时，Webpack 无法识别需要打包的文件范围，因此抛出找不到模块的错误。硬编码路径能正常运行，是因为静态路径可以被 Webpack 直接识别并纳入打包范围。
• 现有代码存在两处额外问题：SwaggerUI 初始化逻辑写在 updated 钩子里会导致重复渲染，加载到的 YAML 内容也未赋值给 spec 变量。

1. 统一存放YAML文件 #

将所有需要动态加载的YAML文件放到固定目录下，例如 @/api-docs/（路径可根据项目实际结构调整）。

2. 调整组件传参规则 #

传入的 src 属性仅填写YAML文件名，无需带完整的 @/ 前缀，例如传入 upload-api.yml，而非 @/upload-api.yml。

3. 改造组件代码 #

使用带固定上下文的模板字符串引入YAML，加载完成后再初始化SwaggerUI，避免重复初始化：

<template><div :id="id">swagger</div></template>

<script>
import SwaggerUI from "swagger-ui";
export default {
  props: {
    src: String
  },
  data() {
    return {
      id: null,
      spec: {}
    };
  },
  mounted() {
    this.id = `swagger${this._uid}`;
    // 带固定路径前缀，让Webpack可识别打包范围
    this.spec = require(`@/api-docs/${this.src}`);
    // 加载完成后初始化SwaggerUI
    SwaggerUI({
      domNode: this.$el,
      spec: this.spec,
    });
  }
};
</script>

<style></style>

4. 灵活路径适配 #

如果YAML文件分散在不同目录，可使用 require.context 显式指定打包上下文，在组件中添加如下逻辑：

// 匹配指定目录下所有yaml文件，第二个参数true表示递归扫描子目录
const apiContext = require.context('@/docs/api', true, /\.ya?ml$/);
// 按传入的src加载对应文件
this.spec = apiContext(`./${this.src}`);

Webpack会自动将指定目录下所有匹配后缀的YAML文件纳入打包范围，支持动态调用。

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