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:

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

After:

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

VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn/'

Development Environment

File: admin/.env.development (if exists)

VITE_APP_BASE_URL='http://localhost:8080/'

How It Works

URL Construction

The production URL is now constructed dynamically:

`${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):

VITE_APP_BASE_URL='http://localhost:8080/'
VITE_APP_REQUEST_TIMEOUT=60000

Staging (.env.staging):

VITE_APP_BASE_URL='https://staging.zhenyangtang.com.cn/'
VITE_APP_REQUEST_TIMEOUT=60000

Production (.env.production):

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:

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:

   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:

   cd admin
   npm run build
   

2. Check built files use production URL
3. Serve and test:

   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:

npm run build -- --mode staging

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

URL Resolution Examples

With Trailing Slash (Current)

VITE_APP_BASE_URL='https://cs.zhenyangtang.com.cn/'
Result: https://cs.zhenyangtang.com.cn/area/ChinaCitys.json ✅

Without Trailing Slash

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:

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

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

Apache Configuration Example

<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:

# 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!