1、vue文件打包为dist
2、编写dockerfile文件,文件内容仅需要指向nginx即可例: FROM nginx:1.23
3、使用命令 docker build -f Dockerfile -t 镜像名称 . 打包镜像
4、使用 docker pull 镜像名称:版本 下载nginx镜像
5、启动dist镜像执行
docker run --name 自定义容器名称 -d -p 自定义端口:80 镜像名称:版本号
6、启动nginx镜像执行
docker run --name 自定义容器名称 -d -p 4030:80 镜像名称:版本号
7、页面访问http://localhost:4030 查看nginx是否启动成功
8、docker ps 查看nginx容器id并执行 docker exec -it 容器id bash进入容器
9、将dist文件夹下所有文件复制到 nginx容器 /usr/share/nginx/html 下
将文件从主机复制到 Docker 容器命令
docker cp 主机文件路径 容器id:容器路径
10、重启nginx 执行docker stop nginx容器id docker start nginx容器id
11、访问第一条自定义的端口查看是否成功