总体目标
为了让项目在 开发环境（dev） 和 生产环境（prod） 都能灵活切换配置，我们将：
-
后端 Django 使用
.env.dev/.env.prod -
前端 Vue 使用
.env.development/.env.production -
所有环境差异都通过
.env控制 -
代码中不再写死任何 IP、域名、密码、端口
这样项目结构更专业、可维护、可扩展。
后端（Django）环境变量体系
Django 加载 .env 的方式
settings.py 顶部：
python
from dotenv import load_dotenv
load_dotenv()Django 只会加载 .env文件，所以我们通过复制方式切换环境：
-
开发环境：
cp .env.dev .env -
生产环境：
cp .env.prod .env
后端 .env.dev（开发环境）
python
DEBUG=True
HOST=192.168.10.143
ALLOWED_HOSTS=*
CORS_ORIGINS=*
MYSQL_HOST=localhost
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASSWORD=111111
MYSQL_DB=backstage
REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_DB=0
JWT_SECRET_KEY=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa特点：
-
全部允许（跨域 + 域名）
-
本地调试最方便
后端 .env.prod（生产环境）
python
DEBUG=False
HOST=your-server-ip-or-domain.com
ALLOWED_HOSTS=yourdomain.com,www.yourdomain.com
CORS_ORIGINS=https://yourdomain.com
MYSQL_HOST=your-mysql-host
MYSQL_PORT=3306
MYSQL_USER=your-mysql-user
MYSQL_PASSWORD=your-mysql-password
MYSQL_DB=backstage
REDIS_HOST=your-redis-host
REDIS_PORT=6379
REDIS_DB=0
JWT_SECRET_KEY=your-strong-random-secret-key特点：
-
严格限制域名
-
安全、可控
Django 动态 ALLOWED_HOSTS 配置
python
raw_hosts = os.environ.get("ALLOWED_HOSTS", "")
if raw_hosts == "*" or raw_hosts == "*,*":
ALLOWED_HOSTS = ["*"]
else:
ALLOWED_HOSTS = [h.strip() for h in raw_hosts.split(",") if h.strip()]Django 动态 CORS 配置
python
raw_cors = os.environ.get("CORS_ORIGINS", "")
if raw_cors == "*" or raw_cors == "*,*":
CORS_ALLOW_ALL_ORIGINS = True
else:
CORS_ALLOWED_ORIGINS = [
origin.strip() for origin in raw_cors.split(",") if origin.strip()
]后端启动方式
开发环境
cp .env.dev .env
python manage.py runserver生产环境
cp .env.prod .env
python manage.py runserver 0.0.0.0:8000前端（Vue）环境变量体系
Vue CLI 会自动根据命令加载对应 .env 文件：
| 命令 | 自动加载 |
|---|---|
| npm run serve | .env.development |
| npm run build | .env.production |
前端 .env.development（开发环境）
VUE_APP_BASE_URL=http://192.168.10.143:8000/
VUE_APP_DEBUG=true前端 .env.production（生产环境）
VUE_APP_BASE_URL=https://your-domain-or-ip:8000/
VUE_APP_DEBUG=false前端 base.js 动态读取后端地址
const api = {
baseUrl: process.env.VUE_APP_BASE_URL,
login: "/api/system/auth/login/",
...
}
export default api;前端 axios 自动拼接 baseURL
import axios from "axios";
import api from "./base";
const service = axios.create({
baseURL: api.baseUrl,
timeout: 10000,
withCredentials: true
});最终效果（你现在已经实现）
✔ 前端自动切换环境
-
serve →
.env.development -
build →
.env.production
✔ 后端通过复制切换环境
-
.env.dev→.env -
.env.prod→.env