Docker 打包Vue3项目镜像

准备条件：

        1、确保vue项目已经打包完成 npm run build

        2、确保宿主机docker配置无误

一、在项目根目录下创建 Dockerfile

在你的 Vue 项目根目录（与 dist 文件夹同级）下创建一个名为 Dockerfile 的文件：

# 使用一个轻量的 Nginx 镜像作为基础
FROM nginx:alpine# 将本地的 dist 目录复制到 Nginx 的默认静态文件目录
COPY dist /usr/share/nginx/html# （可选）如果你有自定义的 Nginx 配置文件，可以取消下面这行的注释，并提供 nginx.conf
# COPY /dist/nginx.conf /etc/nginx/conf.d/default.conf# 暴露 Nginx 默认端口 80
EXPOSE 80# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

二、 （可选）自定义 Nginx 配置文件（我卸载项目public文件夹下，打包后自动生成到dist中）

server {listen       80;                # 容器内部监听 80 端口server_name  localhost;         # 可以改成你的域名，比如 example.com# 设置根目录为 Nginx 的默认静态文件目录root   /usr/share/nginx/html;index  index.html index.htm;# 前端路由支持：所有路径都返回 index.html，由前端路由处理location / {try_files $uri $uri/ /index.html;}# 可选：禁止访问 .map 文件（防止源码泄露）location ~ \.map$ {deny all;}# 可选：设置缓存策略（根据需求调整）location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {expires 1y;add_header Cache-Control "public, no-transform";}

三、构建 Docker 镜像

docker build -t vueapp:1.0.0 .

四、运行 Docker 容器

docker run -d -p 8080:80 --name my-vue-app vueapp:1.0.0