更新

2026-04-17 09:47:17 +08:00
parent fd44feaf09
commit 398f91bc55
280 changed files with 2536 additions and 808 deletions
@@ -0,0 +1,288 @@
+# 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!