推荐订阅源

1、安装Docker Desktop

2、打开Docker Desktop，查找Images来Pull安装（可用命令行安装）
node:latest
nginx:latest

3、挂载本地目录

docker run -it --rm -v F:/demo:/app -w /app -p 5173:5173 node:latest bash

# -v：F:/demo 与 /app 相互映射
# -w：直接进入映射文件夹，省略cd这一步
# -p：映射端口（可以多个 -p），vite默认5173端口

4、创建vue项目

npm create vue@latest # 项目名：vue-docker-demo
cd vue-docker-demo
npm install
npm run build # 必须成功创建dist

5、退出docket容器

exit

6、在项目根目录创建Dockerfile

# 阶段 1：编译
FROM node:latest AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci --prefer-offline --no-audit
COPY . .
RUN npm run build

# 阶段 2：托管
FROM nginx:latest AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 可选：拷贝自定义 nginx 配置（解决刷新 404）
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

7、在项目根目录创建.dockerignore

node_modules
dist
.git
*.md

8、在项目根目录创建nginx.conf（解决 Vue History 模式刷新 404）

events {
    worker_connections 1024;
}
http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        # 关键行：History 模式刷新不 404
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

9、创建本地镜像

cd F:\demo\vue-docker-demo
docker build -t vue-docker-demo .
docker images vue-docker-demo # 检查是否成功

10、运行容器

docker rm -f vue-app  # 强制删除容器（如有）
docker run -d -p 3000:80 --name vue-app vue-docker-demo

11、打开浏览器
http://localhost:3000/