135 lines
3.5 KiB
Markdown
135 lines
3.5 KiB
Markdown
# 环境配置修改总结
|
||
|
||
## 修改概述
|
||
|
||
根据用户需求，已成功实现自动环境检测功能，系统能够自动判断当前环境并使用相应的API地址：
|
||
|
||
- **本地环境**: 自动使用 `http://127.0.0.1:5480`
|
||
- **开发服务器环境**: 自动使用 `http://dev-casedata.igandan.com:5480`
|
||
- **其他环境**: 使用配置文件中的 `VITE_APP_API_URL`
|
||
|
||
## 具体修改内容
|
||
|
||
### 1. 新增文件
|
||
|
||
#### `src/utils/env-util.js`
|
||
- 创建环境检测工具
|
||
- 实现自动环境判断逻辑
|
||
- 提供 `detectEnvironment()` 和 `getCurrentApiUrl()` 函数
|
||
|
||
#### `src/utils/env-test.js`
|
||
- 创建环境检测测试文件
|
||
- 提供测试函数 `testEnvironmentDetection()`
|
||
- 在开发环境下自动加载，方便调试
|
||
|
||
#### `.env.dev-server`
|
||
- 新增开发服务器环境配置文件
|
||
- API地址: `http://dev-casedata.igandan.com:5480`
|
||
|
||
#### `ENV_README.md`
|
||
- 详细的环境配置使用说明文档
|
||
|
||
#### `ENV_CHANGES_SUMMARY.md`
|
||
- 本修改总结文档
|
||
|
||
### 2. 修改文件
|
||
|
||
#### `src/lib/axios.js`
|
||
- 引入环境检测工具
|
||
- 将 `baseURL` 从静态配置改为动态检测: `getCurrentApiUrl()`
|
||
|
||
#### `package.json`
|
||
- 新增 `build:dev-server` 构建命令
|
||
|
||
#### `src/main.js`
|
||
- 在开发环境下自动引入环境检测测试文件
|
||
|
||
#### 环境配置文件
|
||
- `.env.localhost`: 端口从5478改为5480
|
||
- `.env.development`: 端口从5478改为5480
|
||
- `.env.test`: 端口从5478改为5480
|
||
|
||
## 环境检测逻辑
|
||
|
||
### 本地环境检测
|
||
```javascript
|
||
// 检测以下主机名或IP地址
|
||
hostname === 'localhost' ||
|
||
hostname === '127.0.0.1' ||
|
||
hostname === '0.0.0.0' ||
|
||
hostname.includes('192.168.') ||
|
||
hostname.includes('10.') ||
|
||
hostname.includes('172.')
|
||
```
|
||
|
||
### 开发服务器环境检测
|
||
```javascript
|
||
// 检测特定域名
|
||
hostname === 'dev-casedata.igandan.com'
|
||
```
|
||
|
||
### 优先级
|
||
1. **环境检测** (最高优先级)
|
||
2. **配置文件** (中等优先级)
|
||
3. **默认值** (最低优先级)
|
||
|
||
## 使用方法
|
||
|
||
### 开发时
|
||
```bash
|
||
# 本地开发 - 自动使用 127.0.0.1:5480
|
||
npm run localhost
|
||
|
||
# 开发环境 - 自动使用 127.0.0.1:5480
|
||
npm run dev
|
||
```
|
||
|
||
### 部署时
|
||
```bash
|
||
# 部署到开发服务器 - 自动使用 dev-casedata.igandan.com:5480
|
||
npm run build:dev-server
|
||
|
||
# 其他环境
|
||
npm run build:test
|
||
npm run build:pre
|
||
npm run build:prod
|
||
```
|
||
|
||
## 测试验证
|
||
|
||
### 控制台测试
|
||
在开发环境下，打开浏览器控制台，运行：
|
||
```javascript
|
||
testEnv()
|
||
```
|
||
|
||
### 预期结果
|
||
- **本地环境**: API地址显示为 `http://127.0.0.1:5480`
|
||
- **开发服务器环境**: API地址显示为 `http://dev-casedata.igandan.com:5480`
|
||
|
||
## 技术特点
|
||
|
||
1. **零配置**: 无需手动修改任何代码，系统自动判断环境
|
||
2. **智能检测**: 基于主机名、IP地址、环境变量等多维度检测
|
||
3. **端口统一**: 所有环境都使用5480端口
|
||
4. **向后兼容**: 不影响现有的环境配置文件
|
||
5. **开发友好**: 提供测试工具和详细文档
|
||
|
||
## 注意事项
|
||
|
||
1. **端口配置**: 确保后端服务在5480端口运行
|
||
2. **域名配置**: 确保 `dev-casedata.igandan.com` 域名正确解析
|
||
3. **环境变量**: 开发环境下会自动加载测试文件
|
||
4. **构建命令**: 使用正确的构建命令来部署到不同环境
|
||
|
||
## 完成状态
|
||
|
||
✅ **环境检测工具** - 已完成
|
||
✅ **自动API地址配置** - 已完成
|
||
✅ **端口统一为5480** - 已完成
|
||
✅ **环境配置文件更新** - 已完成
|
||
✅ **构建命令添加** - 已完成
|
||
✅ **测试工具** - 已完成
|
||
✅ **文档说明** - 已完成
|
||
|
||
所有修改已完成，系统现在能够自动判断环境并使用相应的API地址！ |