1. 准备工作
   确保你已经在你的Mac上安装了Docker Desktop，并且它正在运行。

2. 创建Vue3项目
   如果你还没有一个Vue3项目，可以使用create-vue脚手架来创建：

npm init vue@latest

1. 创建Dockerfile
   在项目根目录下创建一个Dockerfile文件，这个文件将告诉Docker如何构建你的镜像。一个基本的Dockerfile可能如下所示：

使用官方Nginx镜像作为基础镜像

FROM nginx:latest

设置维护者信息

LABEL maintainer="刘伟"

清除默认的Nginx配置文件

RUN rm /etc/nginx/conf.d/default.conf

将自定义的nginx配置文件复制到容器中

COPY ./nginx.conf /etc/nginx/conf.d/

创建用于存放前端静态文件的目录

RUN mkdir -p /usr/share/nginx/html

将构建好的前端静态文件复制到Nginx的html目录下

COPY ./dist /usr/share/nginx/html

暴露端口，以便主机可以访问

EXPOSE 80

设置容器启动时执行的命令，确保Nginx正常运行

CMD ["nginx", "-g", "daemon off;"]

同时，你可能需要一个nginx.conf文件来配置Nginx服务，例如：

worker_processes  1; 
events {
   
    worker_connections  1024;
}

http {
   
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
   
        listen       80;
        server_name  localhost;

        location / {
   
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
    }
}

1. 创建.dockerignore文件
   在项目根目录下创建.dockerignore文件，以排除不需要复制到镜像中的文件或目录：

node_modules/
.yarn/
dist/

1. 构建Docker镜像
   在项目根目录下运行以下命令来构建镜像：

docker build -t your-image-name .

1. 运行Docker容器
   使用以下命令运行容器：

docker run -d -p 8080:80 --name your-container-name your-image-name

这将启动容器并将其映射到主机的8080端口。

1. 访问应用
   在浏览器中输入http://localhost:8080来访问你的Vue3应用。

2. 使用Docker Compose（可选）

version: '3'
services:
  web:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html
    networks:
      - frontend
      - backend

  backend:
    image: node:latest
    volumes:
      - ./src:/usr/src/app
    networks:
      - backend

networks:
  frontend:
    driver: bridge
  backend:
    driver: bridge

如果你有多个服务需要一起管理，可以使用Docker Compose。创建一个docker-compose.yml文件，并定义你的服务，然后用docker compose up命令启动所有服务。

以上步骤应该可以帮助你在Mac上使用Docker部署Vue3前端项目。如果遇到任何问题，检查Docker的日志输出，通常可以提供错误信息帮助你解决问题。