vben admin框架vue项目发布部署到linux的docker中

吹牛不交税2026-03-25 8:46

vue项目中根目录下的Dockerfile 文件代码如下：

复制代码

FROM nginx:1.17.3-alpine as base
#如果要修改项目在docker中暴露的端口就改下面的，比如改成默认80
EXPOSE 8045 

COPY /_nginx/nginx.conf /etc/nginx/nginx.conf
COPY /_nginx/env.js /etc/nginx/env.js
COPY /_nginx/default.conf /etc/nginx/conf.d/default.conf
COPY /dist/ /usr/share/nginx/html

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

一、打包vue项目

vue项目中根目录下，或者在vscode中打开项目，并在终端命令行中执行npm run build 命令打包项目，打包成功后会在项目根目录下生成dist文件夹。

docker build --platform linux/amd64 -t jq.tahm.web28 .

docker save 8c2d517c1ed05045131a43517b4a8010e2935542e1e8a014ca1f01c0d38ff6dd -o E:\Docker\jq.tahm.web28.tar jq.tahm.web28

查看所有容器，是否有前端项目

docker ps -a

查看镜像，是否有前端项目

docker images

删除容器和镜像

docker rm -f 62cb96222f63

docker rmi -f d902368bfedc

加载镜像

docker load -i /mnt/dockerdata/jq.tahm.web28.tar

创建容器

docker run -itd --name jq.tahm.web28 -p 8045:8045 jq.tahm.web28

查看容器，看创建的容器是否启动了

docker ps -a

如果容器没启动，则执行下面的命令使用ID启动容器。

docker start 192429a22ed4