feat: 添加环境变量配置系统，支持自定义应用标题
- 新增 VITE_APP_TITLE 环境变量，支持自定义浏览器标题 - 添加 .env/.env.development/.env.production 配置文件 - 新增 src/config/index.ts 集中管理应用配置 - 更新 src/vite-env.d.ts 添加类型定义 - 更新 README.md 添加环境变量配置文档 - 更新 .gitignore 排除 dist.zip
This commit is contained in:
MaeLucia
parent
5801077aa6
commit
829ee9a1c1
|
|
@ -0,0 +1,14 @@
|
|||
# ========================================
|
||||
# 公共默认配置
|
||||
# ========================================
|
||||
# 此文件中的配置会作为所有环境的默认值
|
||||
# 被特定环境配置文件覆盖
|
||||
|
||||
# 应用名称
|
||||
VITE_APP_NAME=入舍
|
||||
|
||||
# 应用标题（浏览器标签页显示）
|
||||
VITE_APP_TITLE=入舍Demo-1.0
|
||||
|
||||
# 应用版本
|
||||
VITE_APP_VERSION=1.0.0
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
# ========================================
|
||||
# 开发环境配置
|
||||
# ========================================
|
||||
# 执行 npm run dev 时加载此文件
|
||||
|
||||
# 应用基础路径 - 开发环境
|
||||
VITE_BASE_PATH=/demo/rs-demo/
|
||||
|
||||
# 应用标题 - 开发环境
|
||||
VITE_APP_TITLE=入舍Demo-1.0
|
||||
|
||||
# API 基础地址 - 开发环境
|
||||
VITE_API_BASE_URL=/demo/rs-demo/api
|
||||
|
||||
# 是否启用调试模式
|
||||
VITE_DEBUG=true
|
||||
|
||||
# 是否启用 Mock 数据
|
||||
VITE_ENABLE_MOCK=true
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# ========================================
|
||||
# 生产环境配置
|
||||
# ========================================
|
||||
# 执行 npm run build 时加载此文件
|
||||
|
||||
# 应用基础路径 - 生产环境
|
||||
# 部署到子目录时修改此值，如: /app/ 或 /demo/
|
||||
# 部署到根目录时设置为: /
|
||||
VITE_BASE_PATH=/demo/rs-demo/
|
||||
|
||||
# 应用标题 - 生产环境
|
||||
VITE_APP_TITLE=入舍Demo-1.0
|
||||
|
||||
# API 基础地址 - 生产环境
|
||||
# 生产环境使用相对路径或实际 API 地址
|
||||
VITE_API_BASE_URL=/demo/rs-demo/api
|
||||
|
||||
# 是否启用调试模式
|
||||
VITE_DEBUG=false
|
||||
|
||||
# 是否启用 Mock 数据
|
||||
VITE_ENABLE_MOCK=true
|
||||
|
|
@ -9,6 +9,7 @@ coverage
|
|||
# Production
|
||||
dist
|
||||
build
|
||||
dist.zip
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
|
|
@ -19,8 +20,7 @@ npm-debug.log*
|
|||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
# Local env files (包含敏感信息，不提交)
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
|
|
|
|||
104
README.md
104
README.md
|
|
@ -152,6 +152,110 @@ npm run preview
|
|||
|
||||
---
|
||||
|
||||
## ⚙️ 环境变量配置
|
||||
|
||||
项目使用 Vite 内置的环境变量系统，支持多环境配置。所有环境变量均以 `VITE_` 前缀开头，可在代码中通过 `import.meta.env` 访问。
|
||||
|
||||
### 配置文件说明
|
||||
|
||||
| 文件 | 说明 | 加载时机 |
|
||||
|------|------|----------|
|
||||
| `.env` | 公共默认配置 | 所有环境 |
|
||||
| `.env.development` | 开发环境配置 | `npm run dev` |
|
||||
| `.env.production` | 生产环境配置 | `npm run build` |
|
||||
| `.env.local` | 本地覆盖配置（不提交Git） | 所有环境 |
|
||||
|
||||
### 配置项详解
|
||||
|
||||
#### 基础配置
|
||||
|
||||
| 变量名 | 说明 | 默认值 | 示例 |
|
||||
|--------|------|--------|------|
|
||||
| `VITE_APP_NAME` | 应用名称 | `入舍智能家装` | `入舍智能家装` |
|
||||
| `VITE_APP_TITLE` | 浏览器标签页标题 | `入舍 - 智能家装` | `入舍Demo-1.0` |
|
||||
| `VITE_APP_VERSION` | 应用版本号 | `1.0.0` | `1.0.0` |
|
||||
|
||||
#### 路径配置
|
||||
|
||||
| 变量名 | 说明 | 默认值 | 示例 |
|
||||
|--------|------|--------|------|
|
||||
| `VITE_BASE_PATH` | 应用部署基础路径 | `/` | `/demo/rs-demo/` |
|
||||
| `VITE_API_BASE_URL` | API 接口基础地址 | `/api` | `/demo/rs-demo/api` |
|
||||
|
||||
#### 调试配置
|
||||
|
||||
| 变量名 | 说明 | 默认值 | 可选值 |
|
||||
|--------|------|--------|--------|
|
||||
| `VITE_DEBUG` | 是否启用调试模式 | `false` | `true` / `false` |
|
||||
| `VITE_ENABLE_MOCK` | 是否启用 Mock 数据 | `false` | `true` / `false` |
|
||||
|
||||
### 使用示例
|
||||
|
||||
#### 修改应用标题
|
||||
|
||||
在 `.env.development` 或 `.env.production` 中设置：
|
||||
|
||||
```env
|
||||
# 开发环境标题
|
||||
VITE_APP_TITLE=入舍Demo-1.0
|
||||
|
||||
# 生产环境标题
|
||||
VITE_APP_TITLE=入舍 - 智能家装
|
||||
```
|
||||
|
||||
#### 配置部署路径
|
||||
|
||||
当应用部署到子目录时，需要配置基础路径：
|
||||
|
||||
```env
|
||||
# 部署到子目录 /demo/rs-demo/
|
||||
VITE_BASE_PATH=/demo/rs-demo/
|
||||
VITE_API_BASE_URL=/demo/rs-demo/api
|
||||
|
||||
# 部署到根目录
|
||||
VITE_BASE_PATH=/
|
||||
VITE_API_BASE_URL=/api
|
||||
```
|
||||
|
||||
#### 在代码中使用
|
||||
|
||||
```typescript
|
||||
import { APP_TITLE, APP_CONFIG } from '@/config'
|
||||
|
||||
// 获取应用标题
|
||||
console.log(APP_TITLE) // 输出: 入舍Demo-1.0
|
||||
|
||||
// 获取完整配置
|
||||
console.log(APP_CONFIG.base.title)
|
||||
console.log(APP_CONFIG.api.baseURL)
|
||||
```
|
||||
|
||||
### 配置优先级
|
||||
|
||||
环境变量按以下优先级加载（从高到低）：
|
||||
|
||||
1. `.env.[mode].local` - 本地环境特定配置（不提交Git）
|
||||
2. `.env.[mode]` - 环境特定配置
|
||||
3. `.env.local` - 本地通用配置（不提交Git）
|
||||
4. `.env` - 公共默认配置
|
||||
|
||||
### Fallback 机制
|
||||
|
||||
所有配置项均内置默认值，当环境变量未设置时自动使用：
|
||||
|
||||
```typescript
|
||||
// src/config/index.ts
|
||||
export const APP_CONFIG = {
|
||||
base: {
|
||||
title: import.meta.env.VITE_APP_TITLE || '入舍 - 智能家装',
|
||||
// ...
|
||||
},
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 功能演示
|
||||
|
||||
### 首页模块
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="theme-color" content="#f97316" />
|
||||
<title>入舍 - 智能家装</title>
|
||||
<meta name="app-title" content="入舍 - 智能家装" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* 应用配置文件
|
||||
*
|
||||
* 集中管理应用的全局配置参数
|
||||
* 环境变量按以下优先级加载（从高到低）：
|
||||
* - .env.[mode].local (本地环境特定配置，不提交到 git)
|
||||
* - .env.[mode] (环境特定配置)
|
||||
* - .env.local (本地通用配置，不提交到 git)
|
||||
* - .env (公共默认配置)
|
||||
*
|
||||
* @example
|
||||
* // 获取基础路径
|
||||
* import { BASE_PATH, APP_CONFIG } from '@/config'
|
||||
* console.log(BASE_PATH) // '/demo/rs-demo/' (开发) 或 '/' (生产)
|
||||
*/
|
||||
|
||||
export const APP_CONFIG = {
|
||||
base: {
|
||||
path: import.meta.env.VITE_BASE_PATH || '/',
|
||||
name: import.meta.env.VITE_APP_NAME || '入舍智能家装',
|
||||
title: import.meta.env.VITE_APP_TITLE || '入舍 - 智能家装',
|
||||
version: import.meta.env.VITE_APP_VERSION || '1.0.0',
|
||||
},
|
||||
|
||||
router: {
|
||||
basename: (import.meta.env.VITE_BASE_PATH || '/').replace(/\/$/, ''),
|
||||
},
|
||||
|
||||
api: {
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
|
||||
},
|
||||
|
||||
debug: {
|
||||
enabled: import.meta.env.VITE_DEBUG === 'true',
|
||||
enableMock: import.meta.env.VITE_ENABLE_MOCK === 'true',
|
||||
},
|
||||
|
||||
env: {
|
||||
isDev: import.meta.env.DEV,
|
||||
isProd: import.meta.env.PROD,
|
||||
mode: import.meta.env.MODE,
|
||||
},
|
||||
} as const
|
||||
|
||||
export const BASE_PATH = APP_CONFIG.base.path
|
||||
export const ROUTER_BASENAME = APP_CONFIG.router.basename
|
||||
export const APP_NAME = APP_CONFIG.base.name
|
||||
export const APP_TITLE = APP_CONFIG.base.title
|
||||
export const APP_VERSION = APP_CONFIG.base.version
|
||||
export const API_BASE_URL = APP_CONFIG.api.baseURL
|
||||
export const IS_DEBUG = APP_CONFIG.debug.enabled
|
||||
export const ENABLE_MOCK = APP_CONFIG.debug.enableMock
|
||||
|
||||
export type AppConfig = typeof APP_CONFIG
|
||||
|
|
@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client'
|
|||
import { BrowserRouter } from 'react-router-dom'
|
||||
import App from './App'
|
||||
import ThemeProvider from './components/ThemeProvider'
|
||||
import { ROUTER_BASENAME, APP_TITLE } from './config'
|
||||
import './index.css'
|
||||
|
||||
document.title = APP_TITLE
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<BrowserRouter basename={ROUTER_BASENAME}>
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_BASE_PATH: string
|
||||
readonly VITE_APP_NAME: string
|
||||
readonly VITE_APP_TITLE: string
|
||||
readonly VITE_APP_VERSION: string
|
||||
readonly VITE_API_BASE_URL: string
|
||||
readonly VITE_DEBUG: string
|
||||
readonly VITE_ENABLE_MOCK: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
Loading…
Reference in New Issue