如何在 VuePress Vue 组件中动态加载 YAML 文件作为对象？答案

【问题标题】：How do I dynamically load a YAML file as an object in a VuePress Vue Component?如何在 VuePress Vue 组件中动态加载 YAML 文件作为对象？
【发布时间】：2021-06-06 16:02:00
【问题描述】：

我正在尝试将 SwaggerUI 嵌入到我的 vuepress 站点中。我已经走到这一步了

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

<script>
// import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
import SwaggerUI from "swagger-ui";
import x from '@/upload-api.yml'
export default {
  props: {
    src: String
  },
  data() {
    return {
      id: null,
      spec: {}
    };
  },
  mounted() {
    this.id = `swagger${this._uid}`;
    // over here, I want to use `this.src` to pull the data
    console.log(x);
  },
  updated() {
    if (this.id !== null) {
      SwaggerUI({
        domNode: this.$el,
        // dom_id: `#${this.id}`,
        spec: this.spec,
      });
    }
  }
};
</script>

<style></style>

在我的插件中我有：

const path = require('path');
module.exports = {
  chainWebpack (config, isServer) {
    config.module
      .rule("compile")
      .test(/\.ya?ml$/)
      .type("json")
      .use("yaml")
      .loader("yaml-loader");
    config.resolve.alias.set("@", path.resolve("."));

这是我尝试过的其他一些事情

console.log(require(this.src));

让我感动

[Vue warn]: Error in mounted hook: "Error: Cannot find module '@/upload-api.yml'"

这可行

console.log(require("@/upload-api.yml"));

【问题讨论】：

标签： javascript vue.js webpack vuepress

【解决方案1】：

我最终做了以下事情

我也试过类似Static image src in Vue.js template的解决方案

# Upload

<SwaggerUi :spec="require('@/upload-api.yml')" />

<template>
  <div>swagger</div>
</template>

<script>
import SwaggerUI from "swagger-ui";
export default {
  props: {
    spec: Object
  },
  mounted() {
    SwaggerUI({
      domNode: this.$el,
      spec: this.spec
    });
  }
};
</script>

<style>
@import "~swagger-ui/dist/swagger-ui.css";
</style>

还有一个插件

const path = require('path');
module.exports = {
  chainWebpack (config, isServer) {
    config.module
      .rule("compile")
      .test(/\.ya?ml$/)
      .type('json')
      .use("yaml")
      .loader("yaml-loader");
    config.resolve.alias.set("@", path.resolve("."));
    // config is an instance of ChainableConfig
  },
}

上传-api.yml

openapi: "3.0.2"
info:
  title: OpenWeatherMap
  version: '1.0'
paths:
  /weather:
    get:

这给了我：

【讨论】：