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

问题描述

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

swagger</div></模板><脚本>//import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist";从swagger-ui"导入 SwaggerUI；从'@/upload-api.yml' 导入 x导出默认{道具: {源代码:字符串},数据() {返回 {id:空，规格:{}};},安装(){this.id = `swagger${this._uid}`;//在这里，我想用 `this.src` 来拉取数据控制台日志(x)；},更新() {if (this.id !== null) {SwaggerUI({domNode: this.$el,//dom_id: `#${this.id}`,规格:this.spec，});}}};<style></style>

在我的插件中，我有:

const path = require('path');模块.出口 = {chainWebpack(配置，isServer){配置模块.rule(编译").test(/\.ya?ml$/).type(json").use("yaml").loader(yaml-loader");config.resolve.alias.set("@", path.resolve("."));

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

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

这让我着迷

[Vue 警告]:挂载钩子出错:错误:找不到模块‘@/upload-api.yml’"；

虽然有效

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

解决方案

我最终做了以下事情

我也尝试过类似

I'm trying to embed SwaggerUI into my vuepress site. I got this far

<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>

In my plugin I have:

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("."));

Here's some other things I tried

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

which gets me

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

This works though

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

解决方案

I ended up doing the following

I also tried a solution similar to 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>

And a plugin

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:

Which gives me:

这篇关于如何在 VuePress Vue 组件中动态加载 YAML 文件作为对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！