[Vuejs]-Dockerized Vue SPA with different API urls depending on where it is running

You can use an environment variable containing the API url and then use the environment variable in your Vue app.

The Vue cli supports environment variables and allows you to use environment variables that start with VUE_APP_ in your client-side code. So if you create an environment variable called VUE_APP_API_URL in the environment you’re running the Vue CLI in (whether it is Docker or on your host machine) you should be able to use process.env.VUE_APP_API_URL in your Vue code.

If you’re running Vue CLI locally, you can just run export VUE_APP_API_URL="localhost:8081" before running vue cli serve.

Docker also supports environment variables. For example, if your SPA Docker service is called “frontend”, you can add an environment variable to your Docker Compose file like this:

frontend:
  environment:
    - VUE_APP_API_URL

If you have the VUE_APP_API_URL environment variable set in the host you’re running Docker from it will be passed on to your “frontend” Docker container. So, for example, if you’re running it locally your can run export VUE_APP_API_URL="localhost:8081" before running Docker Compose.

You can also pass through environment variables using an .env file. You can read more about environment variables in Docker Compose files here if you’re interested.