前后端分离项目多环境配置完整笔记

总体目标

为了让项目在 开发环境（dev） 和 生产环境（prod） 都能灵活切换配置，我们将：

• 后端 Django 使用 .env.dev / .env.prod

• 前端 Vue 使用 .env.development / .env.production

• 所有环境差异都通过 .env 控制

• 代码中不再写死任何 IP、域名、密码、端口

这样项目结构更专业、可维护、可扩展。

后端（Django）环境变量体系

Django 加载 .env 的方式

settings.py 顶部：

from dotenv import load_dotenv
load_dotenv()

Django 只会加载 .env文件，所以我们通过复制方式切换环境：

• 开发环境：cp .env.dev .env

• 生产环境：cp .env.prod .env

后端 .env.dev（开发环境）

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（生产环境）

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 配置

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 配置

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

✔ settings.py 不再写死任何配置

✔ base.js 不再写死任何后端地址

✔ 跨域、域名、数据库、Redis、JWT 全部可配置

✔ 项目结构达到企业级标准