Docker容器中Vite/Vue3应用无法通过localhost访问的问题求助

你的配置里有几个关键问题导致无法访问，逐个修正即可：

1. Dockerfile缺少构建步骤且存在语法错误 #

vite preview是用来预览构建后的静态文件的，必须先执行npm run build生成dist目录，否则容器里没有可提供服务的内容。同时你的Dockerfile里RUN npm install后面多了无效的your text，会直接导致构建失败。

2. 端口完全不匹配 #

vite配置中preview.port设为8081，但Dockerfile里EXPOSE的是8080，运行容器时又映射了主机8081→容器8080，三者完全不对应，外部访问时端口映射逻辑混乱。

修正后的Dockerfile #

FROM node:lts-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 新增构建命令，生成dist目录
RUN npm run build
# 与vite preview配置的端口保持一致
EXPOSE 8081
CMD [ "npm", "run", "preview" ]

修正后的容器运行命令 #

docker build -t my-image .
# 主机端口和容器端口都映射为8081，对应vite配置
docker run -it -p 8081:8081 -d my-image

验证步骤 #

1. 构建完成后，查看容器日志确认服务启动：

   docker logs <你的容器ID>
   

   正常情况下会看到类似输出：

   Local: http://localhost:8081/
   Network: http://172.17.0.2:8081/

2. 此时在浏览器访问localhost:8081就能正常打开预览页面了。

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