1.首先在你的本地项目中，删除你的node_modules依赖包(依赖包太大，上传到服务器内容太大，而且依赖上传不完全)
2.在与src同等根目录下配置Dockerfile文件和nginx.conf文件 （并且把vue项目的请求转发修改成/api/与nginx文件中配置一样（相当于代理转发，不过是通过nginx来实现））
3.文件内容如下
Dockerfile文件（你的工作目录取决于你的前端项目你要拉取到服务器中哪一个目录下）
# 构建阶段
FROM node:18 as build-stage
# 设置工作目录
WORKDIR /home/admin/Code/web/
# 复制package.json到工作目录
COPY package*.json ./
# 安装依赖
RUN npm install -g pnpm
# 安装依赖
RUN pnpm install
# 复制所有文件到工作目录
COPY . .
RUN pnpm build# 生产阶段
FROM nginx:stable-alpine as production-stage
# 复制构建阶段的文件到nginx
COPY --from=build-stage /home/admin/Code/web/mannger /usr/share/nginx/html
# 复制nginx配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露端口
EXPOSE 80
# 启动nginx
CMD ["nginx", "-g", "daemon off;"]nginx文件(其他不用修改，修改一下后端地址)
server {listen 80;server_name localhost;# 配置前端项目的路径location / {# 前端项目的路径root /usr/share/nginx/html;# 配置默认首页index index.html index.htm;try_files $uri $uri/ /index.html;}# 配置代理解决跨域location /api/ {# 代理地址proxy_pass 你的后端请求地址例如（http://192.168.0.0.1:8080/）;# 代理跳转后的真实IPproxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;# 转发给后端的协议proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}4.最后将整个本地的项目拿去到服务器上，使用docker打包（在你的项目根目录的终端运行）
让我为您解析这条 Docker 构建命令的各个部分：
**命令结构分析：**
- `docker build` - 基础命令，用于构建 Docker 镜像
- `--no-cache` - 构建参数
- `-t vue-student-web` - 标签参数
- `.` - 构建上下文路径**详细说明：**
1. `docker build`
- Docker的核心命令之一
- 用于从Dockerfile创建新的镜像2. `--no-cache`
- 禁用构建缓存
- 强制Docker重新执行所有构建步骤
- 确保使用最新的基础镜像和依赖3. `-t vue-student-web`
- `-t` 表示为新构建的镜像设置标签(tag)
- `vue-student-web` 是镜像名称
- 方便后续使用该名称引用此镜像4. `.`
- 表示当前目录
- 指定Docker构建上下文的位置
- Dockerfile应该位于此目录中**使用场景：**
- 开发环境需要完全重新构建时
- 确保依赖包为最新版本
- 解决缓存导致的构建问题**命令执行效果：**
将在当前目录下寻找Dockerfile，并根据其中的指令构建一个全新的Docker镜像，命名为"vue-student-web"。
docker build --no-cache -t vue-student-web .5.运行容器命令
docker run -d -p 5173:80 mannger_app vue-student-web
# Docker 运行命令解析
## 命令结构
```bash
docker run -d -p 5173:80 mannger_app vue-student-web
```## 参数说明
- `docker run`: 运行容器的基本命令
- `-d`: (detach) 在后台运行容器
- `-p 5173:80`: 端口映射
- `5173`: 主机端口
- `80`: 容器内部端口
- `mannger_app`: 使用的镜像名称
- `vue-student-web`: 容器名称## 详细解释
1. **后台运行 `-d`**
- 容器在后台运行
- 不会阻塞终端
- 可以继续执行其他命令2. **端口映射 `-p 5173:80`**
- 将容器的 80 端口映射到主机的 5173 端口
- 外部访问地址: `http://localhost:5173`
- 80 端口通常用于 Web 服务3. **镜像和容器名称**
- `mannger_app`: 要运行的 Docker 镜像
- `vue-student-web`: 给运行的容器指定的名称## 常用操作
```bash
# 查看运行中的容器
docker ps# 停止容器
docker stop vue-student-web# 查看容器日志
docker logs vue-student-web
```## 使用场景
- 部署 Vue.js 前端应用
- 开发环境测试
- 生产环境部署
最后访问：
http://47.122.122.173:8090/(这是我的)
