如何在 VuePress Vue 组件中动态加载 YAML 文件作为对象? [英] How do I dynamically load a YAML file as an object in a VuePress Vue Component?
本文介绍了如何在 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 文件作为对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
