Dockerized Vue SPA 具有不同的 API url，具体取决于它运行的位置

Question

我得到了我的 Vue.js 应用程序的这个 docker 图像，它从在 java 后端运行的 api 获取数据。在原料药生产在其下运行app.example.com/api，分期将下运行staging.example.com/api和API将在运行我的本地计算机上运行时localhost:8081。在我的计算机上运行前端时，我可能vue cli serve在项目文件夹中使用，或者它可能使用 docker-compose 作为 docker 图像启动。后端始终作为 docker 镜像运行。

我希望能够对本地 docker-compose 使用相同的 docker 映像，部署到登台并部署到生产，但对后端 api 使用不同的 url。作为奖励，能够使用 vue-cli 服务会很好。

如何做到这一点？

Answer 1

您可以使用包含 API url 的环境变量，然后在您的 Vue 应用程序中使用该环境变量。

Vue cli 支持环境变量，并允许您VUE_APP_在客户端代码中使用以 开头的环境变量。因此，如果您创建一个VUE_APP_API_URL在运行 Vue CLI的环境中调用的环境变量（无论是 Docker 还是在您的主机上），您应该能够process.env.VUE_APP_API_URL在您的 Vue 代码中使用。

如果您在本地运行 Vue CLI，则可以export VUE_APP_API_URL="localhost:8081"在运行vue cli serve.

Docker 还支持环境变量。例如，如果您的 SPA Docker 服务被称为“前端”，您可以将环境变量添加到您的 Docker Compose 文件中，如下所示：

frontend:
  environment:
    - VUE_APP_API_URL

如果您VUE_APP_API_URL在主机中设置了环境变量，那么您正在运行 Docker 的主机将被传递到您的“前端”Docker 容器。因此，例如，如果您在本地运行它，则可以export VUE_APP_API_URL="localhost:8081"在运行 Docker Compose 之前运行它。

您还可以使用.env文件传递环境变量。如果您有兴趣，可以在此处阅读有关 Docker Compose 文件中环境变量的更多信息。