Dockerized Vue SPA根据运行位置的不同，具有不同的API urls

Question

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

我希望能够使用相同的docker镜像用于本地docker-compose，deploy to staging和deploy to production，但使用不同的url到后端api。作为额外的奖励，能够使用vue-cli服务将是很好的。

如何才能做到这一点？

Answer 1

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

Vue cli支持环境变量，并允许您在client-side code中使用以VUE_APP_开头的环境变量。因此，如果您在运行Vue CLI的环境(无论是Docker还是您的主机)中创建了一个名为VUE_APP_API_URL的环境变量，那么您应该能够在您的Vue代码中使用process.env.VUE_APP_API_URL。

如果你在本地运行Vue CLI，你可以在运行vue cli serve之前先运行export VUE_APP_API_URL="localhost:8081"。

Docker也支持environment variables。例如，如果您的SPA Docker服务名为“前端”，则可以将环境变量添加到Docker合成文件中，如下所示：

frontend:
  environment:
    - VUE_APP_API_URL

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

您还可以使用.env file传递环境变量。如果你感兴趣，你可以在here文件中阅读更多关于环境变量的内容。

Answer 2

您可以创建.env文件环境文件用于开发，生产...有关更详细的信息，请查看以下内容：https://dev.to/ratracegrad/how-to-use-environment-variables-in-vue-js-4ko7