Mac环境下Docker容器运行vue-cli欢迎页无法访问的配置求助

你已经完成了项目初始化的基础工作，卡在Docker配置环节很常见，我帮你梳理下遗漏的关键步骤，按顺序操作就能解决问题：

1. 为项目添加Dockerfile #

在docvue项目根目录下创建一个名为Dockerfile的文件，填入以下内容：

# 选用和本地npm版本匹配的Node镜像，比如node:8对应npm5.x
FROM node:8

# 设置容器内的工作目录
WORKDIR /app

# 先复制依赖配置文件，利用Docker缓存优化构建速度
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 复制整个项目文件到容器内
COPY . .

# 暴露vue-cli开发服务默认的8080端口
EXPOSE 8080

# 启动vue开发服务
CMD ["npm", "run", "dev"]

2. 修改vue项目的访问配置 #

默认情况下，vue-cli的开发服务只绑定容器内部的127.0.0.1，外部（你的Mac）无法访问，必须调整配置：
打开docvue/config/index.js，找到dev配置块里的host项，将其从'localhost'修改为'0.0.0.0'：

dev: {
  // ...其他原有配置
  host: '0.0.0.0', // 允许容器外部访问服务
  port: 8080,
  // ...其他原有配置
}

3. 构建Docker镜像 #

回到项目根目录，执行以下命令构建镜像（docvue-image可以换成你喜欢的自定义镜像名称）：

docker build -t docvue-image .

构建过程中会下载镜像和安装依赖，耐心等待完成即可。

4. 运行Docker容器并映射端口 #

这一步是核心，必须把容器内的服务端口映射到Mac本地端口，执行命令：

docker run -d -p 8080:8080 --name docvue-container docvue-image

参数说明：

• -d：让容器在后台运行
• -p 8080:8080：将Mac本地的8080端口映射到容器内的8080端口（左侧是本地端口，右侧是容器端口）
• --name docvue-container：给容器设置一个易识别的名称，方便后续管理

5. 验证访问 #

现在打开Chrome浏览器，访问http://localhost:8080，就能看到vue的欢迎页了。如果还是无法访问，可以做以下检查：

• 执行docker ps查看docvue-container的状态是否为Up，确认容器在正常运行
• 执行lsof -i :8080检查Mac本地8080端口是否被其他进程占用，如果被占用，换个端口重新运行容器，比如docker run -d -p 8081:8080 ...，然后访问localhost:8081

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