ai-admin/admin-frontend/README_ENV.md

环境配置说明

📁 环境变量文件

文件说明

• .env - 所有环境共用的变量
• .env.development - 开发环境专用变量
• .env.production - 生产环境专用变量

变量说明

# API基础地址
VITE_API_BASE_URL=http://localhost:8080/api

# 应用名称
VITE_APP_TITLE=Admin Management System

# 环境标识
VITE_APP_ENV=development

🚀 使用方式

开发环境

# 启动开发服务器 (自动使用.env.development)
npm run dev

# API地址: http://localhost:8080/api
# 前端地址: http://localhost:3000

生产环境构建

# 构建生产版本 (使用.env.production)
npm run build:prod

# 构建开发版本 (使用.env.development)
npm run build:dev

# 普通构建 (默认生产环境)
npm run build

预览构建结果

# 预览构建后的应用
npm run preview

⚙️ 配置不同环境

1. 本地开发

修改 .env.development:

VITE_API_BASE_URL=http://localhost:8080/api

2. 测试环境

修改 .env.production:

VITE_API_BASE_URL=https://test-api.yourcompany.com/api

3. 生产环境

修改 .env.production:

VITE_API_BASE_URL=https://api.yourcompany.com/api

🔧 代理配置

开发环境使用Vite代理，配置在 vite.config.ts:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    }
  }
}

📋 注意事项

1. 环境变量前缀: Vite要求环境变量必须以 VITE_ 开头才能在客户端访问
2. 代理vs直连:
   • 开发环境: 使用代理 /api → http://localhost:8080
   • 生产环境: 直接访问 VITE_API_BASE_URL
3. 类型安全: 环境变量类型定义在 src/types/env.d.ts
4. 构建差异: 不同环境可能需要不同的构建配置

🚀 部署示例

Nginx配置

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/html/dist;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 如果API和前端在同一域名下
    location /api/ {
        proxy_pass http://your-backend-server:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}