时间戳

首页 > 解决方案 > Dockerized Vue SPA 具有不同的 API url，具体取决于它的运行位置

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

问题描述

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

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

如何做到这一点？

标签： dockervue.jsdevops

解决方案

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

Vue cli 支持环境变量，并允许您使用以VUE_APP_客户端代码开头的环境变量。因此，如果您在运行 Vue CLI 的环境中创建一个名为的环境变量VUE_APP_API_URL（无论是 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 文件中的环境变量的更多信息。

推荐阅读