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

Question

我正在尝试将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"));

Answer 1

我最后做了以下事情

我也尝试了一个解决方案类似静态图像src在Vue.js模板

# 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
  },
}

upload-api.yml

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