Javascript VueJS不使用环境变量

我想使用我的vue项目中名为

visitor\u API

的API

master\u admin

。两者都使用docker在生产环境中运行

---

我的设置：

docker-compose.yml

version: '3.5'

services:
  visitor_api: # api backend
    container_name: visitor_api
    image: misterX/server-backend:latest
    restart: unless-stopped
    env_file:
      - .env_api
    networks:
      - visitor-network
    ports:
      - 6001:3000

  master_admin:
    container_name: master_admin
    image: misterX/master-admin:latest
    restart: unless-stopped
    env_file:
      - .env_frontend
    networks:
      - visitor-network
    ports:
      - 4099:80

networks:
  visitor-network:
    driver: bridge

.env_frontend

NODE_ENV=production
VUE_APP_API_BASE_URL=http://visitor_api:3000

主行政服务

const httpClient = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  headers: {
    "Content-Type": "application/json"
  }
});

---

如果我想访问我的

master_admin

frontend，控制台输出显示：

xhr.js:178 GET http://192.168.192.3:4099/modules 404 (Not Found)

因此，我可以访问前端，但与API的连接显然不起作用，因为前端尝试访问自身，但不访问API。这意味着未设置环境变量

但是运行

docker inspect master_admin

显示变量已设置：

---

我认为它们是在运行时环境中设置的，而不是在Vue CLI构建应用程序时设置的。env变量在生成过程中被替换，因此请确保这些变量在生成过程中被设置。@TimVN是的，这就是问题所在，谢谢。我认为它们是在运行时环境中设置的，而不是在Vue CLI生成应用程序时设置的。env变量在生成过程中被替换，因此请确保在生成过程中设置了这些变量。@TimVN是的，这就是问题所在，谢谢