You can use a combination of environment variables and server-side code to generate the swagger.json file dynamically during deployment.
This way, the server URLs will be automatically set based on the environment where the application is deployed
Here are the steps.....
Set up environment variables for each of your server URLs.
During the build or deployment process, use server-side code or a build script to generate the swagger.json file dynamically.
In your case, since you're using Vue CLI, you can use a build script to perform this task.
Within the build script, read the environment variables you defined in Step 1 and inject them into the swagger.json file.
Replace the placeholders for server URL and server name with the actual values from the environment variables.
Once the swagger.json file is generated with the correct server URLs, serve it to your Swagger UI or Swagger Express middleware.
Here's an example of how i did with Node.js and Vue CLI
1. Create a swagger-config.js file in the root of your project.
javascript
const fs = require('fs');
const { serverUrl, serverName } = process.env;
const swaggerJson = {
openapi: '3.0.0',
// ... other parts of your swagger.json ...
servers: [
{
url: serverUrl,
description: serverName,
},
],
// ... other parts of your swagger.json ...
};
fs.writeFileSync('dist/swagger.json', JSON.stringify(swaggerJson));
2. In your package.json, update the build script to execute the swagger-config.js before the build:
json
{
"scripts": {
"build": "node swagger-config.js && vue-cli-service build"
}
}
Before deploying your application, set the environment variables for each environment ex... production, staging, dev..
Now Run the build command to generate the dynamic swagger.json:
bash
npm run build
Deploy the contents of the `dist` folder, which should now include the dynamic swagger.json with the correct server URLs.
Hopefully, your Swagger document will automatically have the correct server URLs based on the environment where it is deployed,