How do i manage server urls in my generated typescript-axios client?

Question

I'm new to frontend development and I want to build a simple backend and frontend app for my portfolio.

I've created the backend with an exposed OpenAPI descriptor endpoint, and the vue frontend with typescript support.

To generate the client, I used openapi-generator-cli with this command:

openapi-generator-cli generate -i http://localhost:5225/swagger/v1/swagger.json -g typescript-axios -o src/generated-client

I want a central place to store my backend url and make it configurable through environment variables or .env file.

So far I can make request to my backend by defining the base path in each of my components like this:

const api = new TodoApi(undefined, "http://localhost:5225");
await api
  .rootGet()
  .then((resp) => (this.todos = resp.data))
  .catch((resp) => console.log(resp));

This seems very hard to manage and a bad practice in my opinion.

What is the best way to manage different server configurations in different environments?

I appreciate any constructive idea.

I asked ChatGPT and read some blogs about the topic but i got very confused in the process.