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
|
# Production
|
||||||
dist
|
dist
|
||||||
build
|
build
|
||||||
|
dist.zip
|
||||||
|
|
||||||
# Misc
|
# Misc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
@ -19,8 +20,7 @@ npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
# Local env files
|
# Local env files (包含敏感信息，不提交)
|
||||||
.env
|
|
||||||
.env.local
|
.env.local
|
||||||
.env.development.local
|
.env.development.local
|
||||||
.env.test.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="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||||
<meta name="theme-color" content="#f97316" />
|
<meta name="theme-color" content="#f97316" />
|
||||||
<title>入舍 - 智能家装</title>
|
<title>入舍 - 智能家装</title>
|
||||||
|
<meta name="app-title" content="入舍 - 智能家装" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<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 { BrowserRouter } from 'react-router-dom'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import ThemeProvider from './components/ThemeProvider'
|
import ThemeProvider from './components/ThemeProvider'
|
||||||
|
import { ROUTER_BASENAME, APP_TITLE } from './config'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
|
||||||
|
document.title = APP_TITLE
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<BrowserRouter>
|
<BrowserRouter basename={ROUTER_BASENAME}>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<App />
|
<App />
|
||||||
</ThemeProvider>
|
</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