start-frontend.sh 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. #!/bin/bash
  2. # =====================================================
  3. # 芋道前端开发模式启动脚本
  4. # 使用方法: ./start-frontend.sh
  5. # =====================================================
  6. set -e
  7. # 颜色定义
  8. GREEN='\033[0;32m'
  9. YELLOW='\033[1;33m'
  10. BLUE='\033[0;34m'
  11. RED='\033[0;31m'
  12. NC='\033[0m'
  13. # 项目根目录
  14. PROJECT_ROOT="$(cd "$(dirname "$0")" && pwd)"
  15. FRONTEND_DIR="$PROJECT_ROOT/yudao-ui/yudao-ui-admin-vue3"
  16. echo -e "${BLUE}========================================${NC}"
  17. echo -e "${BLUE} 芋道前端 - Vue3 Admin${NC}"
  18. echo -e "${BLUE}========================================${NC}"
  19. echo ""
  20. # 加载nvm(如果存在)
  21. load_nvm() {
  22. export NVM_DIR="$HOME/.nvm"
  23. [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
  24. }
  25. # 检查并切换Node.js版本
  26. check_node() {
  27. echo -e "${YELLOW}检查Node.js环境...${NC}"
  28. # 先尝试加载nvm
  29. load_nvm
  30. if ! command -v node &> /dev/null; then
  31. echo -e "${RED}错误: 未找到Node.js${NC}"
  32. if command -v nvm &> /dev/null; then
  33. echo -e "${YELLOW}尝试使用nvm安装最新版本...${NC}"
  34. nvm install node
  35. nvm use node
  36. else
  37. echo -e "${RED}请先安装Node.js 18+ 或 nvm${NC}"
  38. exit 1
  39. fi
  40. fi
  41. NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
  42. if [ "$NODE_VERSION" -lt 18 ]; then
  43. echo -e "${YELLOW}Node.js版本过低 (当前: $(node -v)),尝试切换...${NC}"
  44. if command -v nvm &> /dev/null; then
  45. nvm use node
  46. NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
  47. if [ "$NODE_VERSION" -lt 18 ]; then
  48. echo -e "${YELLOW}安装最新Node.js版本...${NC}"
  49. nvm install node
  50. nvm use node
  51. fi
  52. else
  53. echo -e "${RED}错误: Node.js版本过低且未安装nvm,无法自动切换${NC}"
  54. exit 1
  55. fi
  56. fi
  57. echo -e "${GREEN}✓ Node.js $(node -v)${NC}"
  58. }
  59. # 检查pnpm环境
  60. check_pnpm() {
  61. echo -e "${YELLOW}检查pnpm环境...${NC}"
  62. if ! command -v pnpm &> /dev/null; then
  63. echo -e "${YELLOW}pnpm未安装,正在安装...${NC}"
  64. npm install -g pnpm
  65. fi
  66. echo -e "${GREEN}✓ pnpm $(pnpm -v)${NC}"
  67. }
  68. # 检查依赖是否已安装
  69. check_dependencies() {
  70. echo -e "${YELLOW}检查项目依赖...${NC}"
  71. if [ ! -d "$FRONTEND_DIR/node_modules" ]; then
  72. echo -e "${YELLOW}依赖未安装,正在安装...${NC}"
  73. cd "$FRONTEND_DIR"
  74. pnpm install
  75. echo -e "${GREEN}✓ 依赖安装完成${NC}"
  76. else
  77. echo -e "${GREEN}✓ 依赖已安装${NC}"
  78. fi
  79. }
  80. # 启动开发服务器
  81. start_dev() {
  82. echo ""
  83. echo -e "${GREEN}========================================${NC}"
  84. echo -e "${GREEN} 前端开发服务器启动中...${NC}"
  85. echo -e "${GREEN} 访问地址: http://localhost:80${NC}"
  86. echo -e "${GREEN} 后端API: http://localhost:48080${NC}"
  87. echo -e "${GREEN} 按 Ctrl+C 停止服务${NC}"
  88. echo -e "${GREEN}========================================${NC}"
  89. echo ""
  90. cd "$FRONTEND_DIR"
  91. pnpm dev
  92. }
  93. # 主流程
  94. check_node
  95. check_pnpm
  96. check_dependencies
  97. start_dev