Vue3+Vite+Docker环境下服务地址解析为IP的问题求助

核心问题分析 #

你当前的问题主要是混淆了Vite开发模式和生产模式的环境变量处理逻辑，同时脚本本身存在语法错误，导致文件替换失败。以下是针对性的解决方案：

方案一：开发模式直接获取环境变量（当前场景适配） #

你现在用npm run dev属于开发模式，Vite会直接读取环境变量，不需要通过脚本替换dist文件，之前的替换思路是生产模式的玩法，完全没必要。

1. 修正docker-compose.yml环境变量
   去掉变量值的空格，同时补充完整的后端服务访问地址（Docker同一网络下，服务名backend可直接作为域名使用）：

   environment:
     - VITE_VUE_APP_PREDICT_URL=http://backend:5000
   

2. 简化vite.config.js配置
   Vite官方推荐用import.meta.env而非process.env，无需手动定义process.env：

   import { defineConfig, loadEnv } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd())
     return {
       plugins: [vue()],
       server: {
         host: '0.0.0.0', // 直接在这里配置host，不用在npm命令追加
         port: 5173
       }
     }
   })
   

3. 前端代码中正确读取变量
   替换原process.env的用法：

   console.log(import.meta.env.VITE_VUE_APP_PREDICT_URL) // 输出：http://backend:5000
   

4. 废弃替换脚本，修改Dockerfile.frontend
   直接启动开发服务即可：

   # 保留之前的镜像拉取、依赖安装等步骤
   CMD ["npm", "run", "dev"]
   

方案二：生产模式环境变量替换（后续部署用） #

如果后续要构建生产包（npm run build生成dist），再用脚本替换变量，需要修正脚本和配置：

1. 修正replace_env.sh脚本
   补上sed命令、处理文件不存在的情况，先构建再替换：

   #!/bin/bash
   
   # 先构建生产包
   npm run build
   
   ROOT_DIR=./dist
   # 遍历文件，仅处理存在的文件，避免报错
   for file in $ROOT_DIR/js/*.js* $ROOT_DIR/index.html $ROOT_DIR/precache-manifest*.js; do
     if [ -f "$file" ]; then
       sed -i 's|VITE_VUE_APP_PREDICT_URL_PLACEHOLDER|'"${VITE_VUE_APP_PREDICT_URL}"'|g' "$file"
     fi
   done
   
   # 用serve托管dist（需先安装：npm install -g serve）
   serve -s dist -l 5173
   

2. 调整Dockerfile.frontend

   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   RUN npm install -g serve
   COPY . .
   COPY replace_env.sh ./
   RUN chmod +x replace_env.sh
   ENTRYPOINT ["./replace_env.sh"]
   

3. 保持.env占位符不变

   VITE_VUE_APP_PREDICT_URL=VITE_VUE_APP_PREDICT_URL_PLACEHOLDER
   

关键注意点 #

• Docker同一网络内，服务间通过服务名:端口访问，比如http://backend:5000，不能用localhost
• 开发模式下Vite内存编译，不会生成dist文件夹，所以脚本找不到文件是必然的
• Vite环境变量必须以VITE_开头才能被暴露到前端

内容的提问来源于stack exchange，提问作者Peek0