构建与部署文档

项目概述

邮轮穿舱件管理系统前端是一个基于Vue.js 2.x构建的后台管理页面（Dashboard），采用现代前端技术栈进行开发，支持容器化部署。

参考文件：

• README.md

1. 项目构建过程

1.1 构建配置架构

本项目采用Vue CLI 5作为构建工具，配置结构如下：

flowchart TD
    A[package.json] --> B[vue.config.js]
    A --> C[babel.config.js]
    B --> D[构建配置]
    C --> E[Babel转译]
    D --> F[Webpack配置]
    E --> F
    F --> G[生产构建]

核心配置文件关系：

• vue.config.js：Vue项目主配置文件
• package.json：项目依赖和脚本配置
• babel.config.js：JavaScript转译配置

1.2 Vue配置详解

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'  // 需要转译的依赖库
  ]
})

配置说明：

• transpileDependencies：指定需要Babel转译的依赖包，确保Vuetify组件库在旧版浏览器中正常运行
• 使用Vue CLI Service提供的内置Webpack配置

参考文件：

• vue.config.js

1.3 依赖管理架构

graph TD
    A[Vue 2.6.14] --> B[Vue Router 3.6.5]
    A --> C[Vuex 3.6.2]
    A --> D[Vuetify 2.6.0]
    B --> E[路由管理]
    C --> F[状态管理]
    D --> G[UI组件]
    E --> H[页面导航]
    F --> I[数据共享]
    G --> J[界面渲染]

主要依赖包：

• 核心框架：Vue 2.6.14 + Vue Router 3.6.5 + Vuex 3.6.2
• UI组件：Vuetify 2.6.0（Material Design风格）
• HTTP客户端：Axios 1.7.5
• 工具库：Moment.js、JWT解码、Cookie处理等

参考文件：

• package.json

1.4 构建脚本流程

sequenceDiagram
    participant User
    participant npm
    participant VueCLI
    participant Webpack
    participant Babel
    
    User->>npm: npm run build
    npm->>VueCLI: vue-cli-service build
    VueCLI->>Webpack: 启动构建流程
    Webpack->>Babel: 转译JavaScript
    Babel->>Webpack: 返回转译结果
    Webpack->>VueCLI: 生成dist目录
    VueCLI->>npm: 构建完成

构建命令：

# 开发环境运行
npm run serve

# 生产环境构建
npm run build

# 代码检查
npm run lint

参考文件：

• package.json

2. Docker容器化部署

2.1 多阶段构建架构

flowchart TD
    A[FROM node:14] --> B[构建阶段]
    B --> C[npm install]
    C --> D[npm run build]
    D --> E[生成dist]
    F[FROM nginx:stable-alpine] --> G[生产阶段]
    E --> H[COPY dist到nginx]
    H --> I[EXPOSE 80]
    I --> J[启动nginx]

2.2 Dockerfile详细解析

# 构建阶段
FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建阶段说明：

1. 基础镜像：使用Node.js 14作为构建环境
2. 依赖安装：复制package文件并安装依赖，利用Docker缓存优化
3. 代码构建：复制源代码并执行生产构建
4. 多阶段构建：减少最终镜像大小，只包含运行所需文件

生产阶段说明：

1. 轻量级运行环境：使用Alpine Linux的Nginx镜像
2. 静态文件服务：将构建结果复制到Nginx默认目录
3. 端口暴露：暴露80端口供外部访问
4. 服务启动：以非守护进程模式运行Nginx

参考文件：

• Dockerfile

2.3 容器构建与运行

# 构建Docker镜像
docker build -t cruise-penetration-frontend .

# 运行容器
docker run -d -p 8080:80 --name cruise-frontend cruise-penetration-frontend

# 使用Docker Compose（推荐）
docker-compose up -d

3. 生产环境部署注意事项

3.1 环境配置要求

graph LR
    A[服务器环境] --> B[Node.js 14+]
    A --> C[Docker支持]
    A --> D[网络访问]
    B --> E[构建环境]
    C --> F[运行环境]
    D --> G[API连接]

系统要求：

• Node.js版本：14.x或更高（构建时）
• Docker环境：Docker 20.10+ 或 Docker Compose
• 内存要求：构建时至少2GB，运行时512MB
• 网络要求：能够访问后端API服务

3.2 安全最佳实践

容器安全：

• 使用非root用户运行容器
• 定期更新基础镜像安全补丁
• 配置适当的资源限制
• 启用HTTPS传输加密

应用安全：

• 环境变量管理敏感配置
• JWT令牌安全存储
• API请求加密传输
• 输入验证和XSS防护

3.3 性能优化策略

构建优化：

// 可选的vue.config.js优化配置
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
          }
        }
      }
    }
  }
}

运行时优化：

• 启用Gzip压缩
• 配置浏览器缓存策略
• 使用CDN加速静态资源
• 监控容器资源使用情况

3.4 监控与日志

监控指标：

• 容器CPU/内存使用率
• Nginx访问日志和错误日志
• 应用性能指标（页面加载时间等）
• API响应时间和成功率

日志配置：

# 查看容器日志
docker logs cruise-frontend

# 实时监控日志
docker logs -f cruise-frontend

# 日志文件持久化
docker run -v /host/logs:/var/log/nginx ...

4. 故障排除指南

4.1 常见问题解决

构建失败：

• 检查Node.js版本兼容性
• 清理npm缓存：npm cache clean --force
• 删除node_modules重新安装：rm -rf node_modules && npm install

容器启动问题：

• 检查端口冲突：netstat -tulpn | grep :80
• 验证镜像构建：docker images
• 查看详细错误：docker logs <container_id>

运行时问题：

• 检查API连接配置
• 验证环境变量设置
• 查看浏览器开发者工具控制台错误

索引

邮轮穿舱件管理系统前端采用现代化的Vue.js技术栈，通过Vue CLI进行标准化构建，支持Docker容器化部署。多阶段构建策略确保了生产环境镜像的轻量化和安全性。在实际部署过程中，需要重点关注环境配置、安全策略和性能优化，确保系统的稳定运行。

关键要点：

• 使用Vue CLI 5进行标准化构建流程
• 采用多阶段Docker构建优化镜像大小
• 基于Nginx提供静态文件服务
• 注重生产环境的安全和性能配置

通过遵循本文档的构建和部署指南，可以确保系统在不同环境中的稳定运行和高效维护。