vue 项目发布到docker

在vue项目目录下 执行 npm run build  会生成dist文件夹，dist文件夹中的内容就是包含了打包好的静态文件

 写docker file 

FROM nginx

# 将本地的 dist 文件夹复制到 nginx 默认的静态文件目录
COPY ./dist /usr/share/nginx/html

执行 docker build -t my-vue-app .   构建docker镜像 

写docker-compose

version: '3'

services:
  # Vue演示服务
  vuedemo:
    image: my-vue-app
    container_name: vuedemo
    restart: unless-stopped
    ports:
      - "8080:80"  # 将主机端口 8080 映射到容器端口 80
    volumes:
      - ./dist:/usr/share/nginx/html  # 挂载Vue项目文件到Nginx的HTML目录

执行 docker-compose up -d  运行容器.

访问localhost:8080  即可查看到网站内容