如何解决如何在 VuePress Vue 组件中动态加载 YAML 文件作为对象?
我正在尝试将 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"));
解决方法
我最终做了以下事情
我也尝试过类似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:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。