zyt/REGION_API_ENV_VARIABLE_UPDATE.md

# Region API Environment Variable Update (省市区API环境变量更新)

## Change Summary
Updated the region data API URL to use the `VITE_APP_BASE_URL` environment variable instead of a hardcoded URL, making it more flexible and maintainable across different environments.

## Changes Made

### 1. Updated prescription/index.vue
**File**: `admin/src/views/consumer/prescription/index.vue`

**Before:**
```typescript
const apiUrl = import.meta.env.DEV 
    ? '/api-proxy/area/ChinaCitys.json'
    : 'https://admin.zhenyangtang.com.cn/area/ChinaCitys.json'
```

**After:**
```typescript
const apiUrl = import.meta.env.DEV 
    ? '/api-proxy/area/ChinaCitys.json'
    : `${import.meta.env.VITE_APP_BASE_URL}area/ChinaCitys.json`
```

### 2. Updated prescription/order_list.vue
**File**: `admin/src/views/consumer/prescription/order_list.vue`

Applied the same change.

## Environment Configuration

### Production Environment
**File**: `admin/.env.production`
```env
VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn/'
```

### Development Environment
**File**: `admin/.env.development` (if exists)
```env
VITE_APP_BASE_URL='http://localhost:8080/'
```

## How It Works

### URL Construction
The production URL is now constructed dynamically:
```typescript
`${import.meta.env.VITE_APP_BASE_URL}area/ChinaCitys.json`
```

With `VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn/'`, this becomes:
```
https://cs.zhenyangtang.com.cn/area/ChinaCitys.json
```

### Development vs Production

**Development Mode:**
- Uses proxy: `/api-proxy/area/ChinaCitys.json`
- Vite proxy rewrites to external URL
- Avoids CORS issues

**Production Mode:**
- Uses: `${VITE_APP_BASE_URL}area/ChinaCitys.json`
- Resolves to: `https://cs.zhenyangtang.com.cn/area/ChinaCitys.json`
- Direct fetch from configured base URL

## Benefits

### 1. Environment Flexibility
- ✅ Different URLs for different environments (dev, staging, production)
- ✅ No code changes needed when switching environments
- ✅ Single source of truth for base URL

### 2. Easier Deployment
- ✅ Change URL by updating `.env.production` file
- ✅ No need to modify source code
- ✅ Supports multiple deployment targets

### 3. Consistency
- ✅ Uses same base URL as other API calls
- ✅ Maintains consistency across the application
- ✅ Easier to manage and maintain

### 4. Configuration Management
- ✅ Centralized configuration in environment files
- ✅ Easy to override for different environments
- ✅ Follows best practices for environment-specific settings

## Environment Files

### Structure
```
admin/
├── .env.development      # Development environment
├── .env.production       # Production environment
├── .env.staging          # Staging environment (optional)
└── .env.local            # Local overrides (gitignored)
```

### Example Configurations

**Development** (`.env.development`):
```env
VITE_APP_BASE_URL='http://localhost:8080/'
VITE_APP_REQUEST_TIMEOUT=60000
```

**Staging** (`.env.staging`):
```env
VITE_APP_BASE_URL='https://staging.zhenyangtang.com.cn/'
VITE_APP_REQUEST_TIMEOUT=60000
```

**Production** (`.env.production`):
```env
VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn/'
VITE_APP_REQUEST_TIMEOUT=60000
```

## Testing Steps

### 1. Verify Environment Variable
Check that the environment variable is loaded:
```typescript
console.log('Base URL:', import.meta.env.VITE_APP_BASE_URL)
```

Expected output in production:
```
Base URL: https://cs.zhenyangtang.com.cn/
```

### 2. Test Development Mode
1. Run development server:
   ```bash
   cd admin
   npm run dev
   ```
2. Open browser console
3. Check constructed URL uses proxy
4. Verify region selector loads data

### 3. Test Production Build
1. Build for production:
   ```bash
   cd admin
   npm run build
   ```
2. Check built files use production URL
3. Serve and test:
   ```bash
   npm run preview
   ```
4. Verify region selector loads from: `https://cs.zhenyangtang.com.cn/area/ChinaCitys.json`

### 4. Test Different Environments
Create a staging build:
```bash
npm run build -- --mode staging
```

Verify it uses the staging URL from `.env.staging`.

## URL Resolution Examples

### With Trailing Slash (Current)
```typescript
VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn/'
Result: https://cs.zhenyangtang.com.cn/area/ChinaCitys.json ✅
```

### Without Trailing Slash
```typescript
VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn'
Result: https://cs.zhenyangtang.com.cnarea/ChinaCitys.json ❌
```

**Important**: Ensure `VITE_APP_BASE_URL` always ends with `/`

### Handling Missing Trailing Slash
If you want to be defensive, you could add:
```typescript
const baseUrl = import.meta.env.VITE_APP_BASE_URL.endsWith('/') 
    ? import.meta.env.VITE_APP_BASE_URL 
    : `${import.meta.env.VITE_APP_BASE_URL}/`

const apiUrl = import.meta.env.DEV 
    ? '/api-proxy/area/ChinaCitys.json'
    : `${baseUrl}area/ChinaCitys.json`
```

## Troubleshooting

### Issue: Region selector not loading in production
**Check:**
1. Verify `.env.production` file exists
2. Check `VITE_APP_BASE_URL` is set correctly
3. Ensure URL ends with `/`
4. Verify file exists at: `${VITE_APP_BASE_URL}area/ChinaCitys.json`

### Issue: 404 Not Found
**Solution:**
1. Check the constructed URL in browser Network tab
2. Verify the file is accessible at that URL
3. Check server configuration for the path

### Issue: CORS Error
**Solution:**
1. Ensure server has proper CORS headers
2. Check `Access-Control-Allow-Origin` header
3. Verify the domain is allowed

## Server Configuration

### File Location
Ensure the file exists at:
```
https://cs.zhenyangtang.com.cn/area/ChinaCitys.json
```

### Nginx Configuration Example
```nginx
location /area/ {
    alias /path/to/public/area/;
    add_header Access-Control-Allow-Origin *;
    add_header Cache-Control "public, max-age=86400";
}
```

### Apache Configuration Example
```apache
<Directory "/path/to/public/area">
    Header set Access-Control-Allow-Origin "*"
    Header set Cache-Control "public, max-age=86400"
</Directory>
```

## Related Files

### Frontend:
- `admin/src/views/consumer/prescription/index.vue`
  - Updated to use `VITE_APP_BASE_URL`
- `admin/src/views/consumer/prescription/order_list.vue`
  - Updated to use `VITE_APP_BASE_URL`

### Configuration:
- `admin/.env.production`
  - Contains `VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn/'`
- `admin/.env.development`
  - Should contain development base URL
- `admin/vite.config.ts`
  - Proxy configuration for development

## Best Practices

### 1. Always Use Environment Variables
✅ Do: `${import.meta.env.VITE_APP_BASE_URL}path/to/resource`  
❌ Don't: `https://hardcoded-domain.com/path/to/resource`

### 2. Ensure Trailing Slashes
✅ Do: `VITE_APP_BASE_URL='https://example.com/'`  
❌ Don't: `VITE_APP_BASE_URL='https://example.com'`

### 3. Use Consistent Naming
All Vite environment variables should start with `VITE_` to be exposed to the client.

### 4. Document Environment Variables
Keep a `.env.example` file with all required variables:
```env
# Base URL for API and static resources
VITE_APP_BASE_URL='https://example.com/'

# Request timeout in milliseconds
VITE_APP_REQUEST_TIMEOUT=60000
```

## Summary

✅ Replaced hardcoded URL with environment variable  
✅ Uses `VITE_APP_BASE_URL` from `.env.production`  
✅ More flexible for different environments  
✅ Easier to deploy and maintain  
✅ Consistent with other API configurations  
✅ Applied to both prescription index and order list views  

The region API now uses the configured base URL, making it easier to manage across different environments!