Vercel 制作后我无法查看 swagger ui

Question

我创建了 .yaml 文件并将其转换为 js 形式。我的代码是ES6编写的。当我使用 vercel cli 运行应用程序时

vercel-dev

我可以查看 swagger ui。但是之后

vercel-prod

命令我可以查看我的主页，并且有

的链接

/api-docs

路线。但我无法查看 swagger ui。它说

---the stylesheet https://school-management-system-rest-api.vercel.app/api-docs/swagger-ui.css was not loaded because its MIME type, "text/html", is not "text/css". api-docs ---Loading failed for the <script> with source "https://school-management-system-rest-api.vercel.app/api-docs/swagger-ui-bundle.js".---he script from "https://school-management-system-rest-api.vercel.app/api-docs/swagger-ui-standalone-preset.js" was loaded even though its MIME type ("text/html") is not a valid JavaScript MIME type

我尝试将 swagger 文件移至公用文件夹。但在这种情况下，我遇到了 commonJS 和 ES6 不兼容的问题。我想我需要另一种解决方案。我对巴别塔一无所知。

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const openApiYamlPath = path.join(__dirname, "./public/SchoolManSystemOpenAPI.yaml");
const openapiObject = yaml.load(fs.readFileSync(openApiYamlPath, "utf8"));

const options = {
  swaggerDefinition: openapiObject,
  apis: ["./routes/*.js"],

};

const swaggerSpec = swaggerJsDoc(options);
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec));

Answer 1

使用网上找到的不同解决方案进行多次试验和错误后，我想，

vercel

由于某种原因无法获取和使用swagger dist文件（我正在使用

swagger-ui-express

）。然而，相同的 API swagger 文档在

render

上运行良好（但是，需要很长时间来滋润页面）。

由于没有其他解决方案适合我，所以我不得不使用这种 hacky 方式。

//在我的server.js中

import path from "path";
import { fileURLToPath } from "URL";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export const __swaggerDistPath = path.join(
  __dirname,
  "node_modules",
  "swagger-ui-dist"
);

//然后在我的 swagger.js 文件或您用于 swagger 的任何文件中

import express from "express";
import { __swaggerDistPath } from "../server.js";

app.use(
    "/api/docs",
    express.static(__swaggerDistPath, { index: false }),
    swaggerUi.serve,
    swaggerUi.setup(swaggerDocs(port), options)
  );

显然，您必须根据您使用 swagger 的场景以及设置方式来修改解决方案。但是，这里的主要概念是直接从

node_modules/swagger-ui-dist

文件夹获取 swagger dist 文件（CSS 和 js 文件）。