#!/bin/bash ############################################## # Snapshot 前端部署脚本 # 适用于 Linux 环境 ############################################## # 颜色输出 RED='\033[0;31m' GREEN='\033[0;32m' YELLOW='\033[1;33m' BLUE='\033[0;34m' NC='\033[0m' # No Color # 打印带颜色的消息 print_info() { echo -e "${GREEN}[INFO]${NC} $1" } print_error() { echo -e "${RED}[ERROR]${NC} $1" } print_warning() { echo -e "${YELLOW}[WARNING]${NC} $1" } # 检查命令是否存在 command_exists() { command -v "$1" >/dev/null 2>&1 } echo "============================================" echo "Snapshot 前端部署脚本" echo "============================================" echo # 1. 检查Node.js环境 echo "[1/5] 检查Node.js环境..." if ! command_exists node; then print_error "未检测到Node.js环境" echo "请安装 Node.js 16 或更高版本" exit 1 fi NODE_VERSION=$(node -v) NPM_VERSION=$(npm -v) print_info "Node.js环境检查通过" echo "Node版本: $NODE_VERSION" echo "NPM版本: $NPM_VERSION" echo # 2. 检查npm环境 echo "[2/5] 检查npm环境..." if ! command_exists npm; then print_error "未检测到npm环境" exit 1 fi print_info "npm环境检查通过" echo # 3. 安装项目依赖 echo "[3/5] 安装项目依赖..." if [ ! -d "node_modules" ]; then print_info "正在安装依赖,请稍候..." npm install if [ $? -neq 0 ]; then print_error "依赖安装失败" exit 1 fi print_info "依赖安装完成" else print_info "依赖已存在,跳过安装" fi echo # 4. 构建项目 echo "[4/5] 构建项目..." npm run build if [ $? -neq 0 ]; then print_error "项目构建失败" exit 1 fi print_info "项目构建完成" echo # 5. 启动服务 echo "[5/5] 启动服务..." echo echo "============================================" echo "选择启动模式:" echo "============================================" echo "1. 开发模式(热重载,端口8081)" echo "2. 生产模式(使用nginx等服务器)" echo "3. 仅构建(不启动服务器)" echo read -p "请输入选项 (1/2/3): " mode case $mode in 1) echo print_info "启动开发服务器..." echo "访问地址: http://localhost:8081" echo echo "按 Ctrl+C 停止服务器" echo npm run serve ;; 2) echo print_info "启动生产服务器..." # 检查dist目录 if [ ! -d "dist" ]; then print_error "dist目录不存在,请先执行构建" exit 1 fi # 使用Python的简单HTTP服务器(如果可用) if command_exists python3; then echo "使用Python HTTP服务器" echo "访问地址: http://localhost:8081" cd dist && python3 -m http.server 8081 # 使用npx http-server elif command_exists npx; then echo "使用http-server" echo "访问地址: http://localhost:8081" npx http-server dist -p 8081 else print_warning "未找到HTTP服务器工具" echo "请安装nginx或使用以下命令:" echo " npm install -g http-server" echo " http-server dist -p 8081" echo print_info "构建文件位于: dist目录" print_info "您可以将dist目录部署到任何静态文件服务器" exit 0 fi ;; 3) echo print_info "构建完成!" echo "构建文件位于: dist目录" echo echo "部署到生产环境:" echo "1. 将dist目录复制到Web服务器" echo "2. 配置nginx指向dist目录" echo "3. 或使用任何静态文件托管服务" echo echo "nginx配置示例:" echo "server {" echo " listen 80;" echo " server_name localhost;" echo " root /path/to/dist;" echo " index index.html;" echo " location / {" echo " try_files \$uri \$uri/ /index.html;" echo " }" echo "}" ;; *) print_error "无效的选项" exit 1 ;; esac