333351444
This commit is contained in:
parent
29775c19e1
commit
5e2903488c
@ -1,135 +0,0 @@
|
||||
# 环境配置修改总结
|
||||
|
||||
## 修改概述
|
||||
|
||||
根据用户需求，已成功实现自动环境检测功能，系统能够自动判断当前环境并使用相应的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地址！
|
||||
88
ENV_CONFIG_README.md
Normal file
88
ENV_CONFIG_README.md
Normal file
@ -0,0 +1,88 @@
|
||||
# 环境配置说明
|
||||
|
||||
## 环境配置文件
|
||||
|
||||
项目包含以下环境配置文件，用于配置不同环境的API地址：
|
||||
|
||||
### 1. `.env.localhost` - 本地开发环境
|
||||
```
|
||||
NODE_ENV=development
|
||||
VITE_APP_TITLE='SmartAdmin 本地环境(Local)'
|
||||
VITE_APP_API_URL='http://127.0.0.1:5480'
|
||||
```
|
||||
|
||||
### 2. `.env.development` - 开发环境
|
||||
```
|
||||
NODE_ENV=development
|
||||
VITE_APP_TITLE='SmartAdmin 开发环境(Dev)'
|
||||
VITE_APP_API_URL='http://127.0.0.1:5480'
|
||||
```
|
||||
|
||||
### 3. `.env.dev-server` - 开发服务器环境
|
||||
```
|
||||
NODE_ENV=development
|
||||
VITE_APP_TITLE='SmartAdmin 开发服务器环境(Dev Server)'
|
||||
VITE_APP_API_URL='http://dev-casedata.igandan.com:5480'
|
||||
```
|
||||
|
||||
### 4. `.env.test` - 测试环境
|
||||
```
|
||||
NODE_ENV=production
|
||||
VITE_APP_TITLE='SmartAdmin 测试环境(Test)'
|
||||
VITE_APP_API_URL='http://dev-casedata.igandan.com/admin/api'
|
||||
```
|
||||
|
||||
### 5. `.env.pre` - 预发布环境
|
||||
```
|
||||
NODE_ENV=production
|
||||
VITE_APP_TITLE='SmartAdmin 预发布环境(Pre)'
|
||||
VITE_APP_API_URL='https://preview.smartadmin.vip/smart-admin-api'
|
||||
```
|
||||
|
||||
### 6. `.env.production` - 生产环境
|
||||
```
|
||||
NODE_ENV=production
|
||||
VITE_APP_TITLE='SmartAdmin V3.X'
|
||||
VITE_APP_API_URL='https://preview.smartadmin.vip/smart-admin-api'
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 开发时
|
||||
```bash
|
||||
# 本地开发
|
||||
npm run localhost
|
||||
|
||||
# 开发环境
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 部署时
|
||||
```bash
|
||||
# 部署到开发服务器
|
||||
npm run build:dev-server
|
||||
|
||||
# 部署到测试环境
|
||||
npm run build:test
|
||||
|
||||
# 部署到预发布环境
|
||||
npm run build:pre
|
||||
|
||||
# 部署到生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **API地址配置**: 每个环境配置文件中的 `VITE_APP_API_URL` 决定了该环境使用的后端API地址
|
||||
2. **端口配置**: 本地环境使用5480端口，开发服务器环境也使用5480端口
|
||||
3. **路径配置**: 测试环境使用 `/admin/api` 路径，其他环境根据实际情况配置
|
||||
4. **手动修改**: 如需修改API地址，直接编辑对应的环境配置文件即可
|
||||
|
||||
## 当前配置状态
|
||||
|
||||
- ✅ 本地环境: `http://127.0.0.1:5480`
|
||||
- ✅ 开发服务器环境: `http://dev-casedata.igandan.com:5480`
|
||||
- ✅ 测试环境: `http://dev-casedata.igandan.com/admin/api`
|
||||
- ✅ 预发布环境: `https://preview.smartadmin.vip/smart-admin-api`
|
||||
- ✅ 生产环境: `https://preview.smartadmin.vip/smart-admin-api`
|
||||
@ -1,82 +0,0 @@
|
||||
# 环境配置说明
|
||||
|
||||
## 环境配置文件
|
||||
|
||||
项目包含以下环境配置文件：
|
||||
|
||||
### 1. `.env.localhost` - 本地开发环境
|
||||
- **用途**: 本地开发时使用
|
||||
- **API地址**: `http://127.0.0.1:5480`
|
||||
- **启动命令**: `npm run dev:localhost`
|
||||
|
||||
### 2. `.env.development` - 开发环境
|
||||
- **用途**: 开发环境使用
|
||||
- **API地址**: `http://127.0.0.1:5480`
|
||||
- **启动命令**: `npm run dev`
|
||||
|
||||
### 3. `.env.dev-server` - 开发服务器环境
|
||||
- **用途**: 部署到开发服务器时使用
|
||||
- **API地址**: `http://dev-casedata.igandan.com:5480`
|
||||
- **启动命令**: `npm run build:dev-server`
|
||||
|
||||
### 4. `.env.test` - 测试环境
|
||||
- **用途**: 测试环境使用
|
||||
- **API地址**: `http://127.0.0.1:5480`
|
||||
- **启动命令**: `npm run build:test`
|
||||
|
||||
### 5. `.env.pre` - 预发布环境
|
||||
- **用途**: 预发布环境使用
|
||||
- **API地址**: `https://preview.smartadmin.vip/smart-admin-api`
|
||||
- **启动命令**: `npm run build:pre`
|
||||
|
||||
### 6. `.env.production` - 生产环境
|
||||
- **用途**: 生产环境使用
|
||||
- **API地址**: `https://preview.smartadmin.vip/smart-admin-api`
|
||||
- **启动命令**: `npm run build`
|
||||
|
||||
## 自动环境检测
|
||||
|
||||
项目已实现自动环境检测功能，无需手动配置：
|
||||
|
||||
### 检测逻辑
|
||||
1. **本地环境**: 自动检测 `localhost`、`127.0.0.1`、`192.168.x.x` 等IP地址
|
||||
2. **开发服务器**: 自动检测 `dev-casedata.igandan.com` 域名
|
||||
3. **其他环境**: 使用配置文件中的 `VITE_APP_API_URL`
|
||||
|
||||
### 端口配置
|
||||
- **本地环境**: 5480
|
||||
- **开发服务器**: 5480
|
||||
- **其他环境**: 根据配置文件
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 开发时
|
||||
```bash
|
||||
# 本地开发
|
||||
npm run dev:localhost
|
||||
|
||||
# 开发环境
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 部署时
|
||||
```bash
|
||||
# 部署到开发服务器
|
||||
npm run build:dev-server
|
||||
|
||||
# 部署到测试环境
|
||||
npm run build:test
|
||||
|
||||
# 部署到预发布环境
|
||||
npm run build:pre
|
||||
|
||||
# 部署到生产环境
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **端口统一**: 所有环境都使用5480端口
|
||||
2. **自动检测**: 无需手动修改代码，系统会自动判断环境
|
||||
3. **配置优先级**: 环境检测 > 配置文件 > 默认值
|
||||
4. **开发便利**: 本地开发时自动使用127.0.0.1:5480，部署时自动使用dev-casedata.igandan.com:5480
|
||||
@ -15,14 +15,13 @@ import { decryptData, encryptData } from './encrypt';
|
||||
import { DATA_TYPE_ENUM } from '../constants/common-const';
|
||||
import _ from 'lodash';
|
||||
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
|
||||
import { getCurrentApiUrl } from '/@/utils/env-util';
|
||||
|
||||
// token的消息头
|
||||
const TOKEN_HEADER = 'Authorization';
|
||||
|
||||
// 创建axios对象
|
||||
const smartAxios = axios.create({
|
||||
baseURL: getCurrentApiUrl(),
|
||||
baseURL: import.meta.env.VITE_APP_API_URL,
|
||||
});
|
||||
|
||||
// 退出系统
|
||||
|
||||
@ -36,11 +36,6 @@ import '/@/utils/ployfill';
|
||||
import { useDictStore } from '/@/store/modules/system/dict.js';
|
||||
import { dictApi } from '/@/api/support/dict-api.js';
|
||||
|
||||
// 开发环境下引入环境检测测试
|
||||
if (import.meta.env.DEV) {
|
||||
import('/@/utils/env-test.js');
|
||||
}
|
||||
|
||||
/*
|
||||
* -------------------- ※ 着重 解释说明下main.js的初始化逻辑 begin ※ --------------------
|
||||
*
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
/*
|
||||
* 环境检测测试文件
|
||||
* 用于验证环境检测功能是否正常工作
|
||||
*
|
||||
* @Author: xing
|
||||
* @Date: 2025-01-27
|
||||
* @Copyright gdxz
|
||||
*/
|
||||
|
||||
import { detectEnvironment, getCurrentApiUrl } from './env-util';
|
||||
|
||||
/**
|
||||
* 测试环境检测功能
|
||||
*/
|
||||
export function testEnvironmentDetection() {
|
||||
console.log('=== 环境检测测试 ===');
|
||||
|
||||
const env = detectEnvironment();
|
||||
|
||||
console.log('环境检测结果:');
|
||||
console.log('- isLocal:', env.isLocal);
|
||||
console.log('- isDevServer:', env.isDevServer);
|
||||
console.log('- 当前主机名:', typeof window !== 'undefined' ? window.location.hostname : 'Node.js环境');
|
||||
console.log('- 当前API地址:', getCurrentApiUrl());
|
||||
console.log('- 环境变量NODE_ENV:', import.meta.env.NODE_ENV);
|
||||
console.log('- 环境变量VITE_APP_API_URL:', import.meta.env.VITE_APP_API_URL);
|
||||
|
||||
// 测试不同环境下的API地址
|
||||
console.log('\n=== 不同环境下的API地址测试 ===');
|
||||
|
||||
// 模拟本地环境
|
||||
if (typeof window !== 'undefined') {
|
||||
const originalHostname = window.location.hostname;
|
||||
|
||||
// 测试本地环境
|
||||
Object.defineProperty(window.location, 'hostname', {
|
||||
value: 'localhost',
|
||||
writable: true
|
||||
});
|
||||
console.log('模拟localhost环境:', getCurrentApiUrl());
|
||||
|
||||
// 测试开发服务器环境
|
||||
Object.defineProperty(window.location, 'hostname', {
|
||||
value: 'dev-casedata.igandan.com',
|
||||
writable: true
|
||||
});
|
||||
console.log('模拟dev-casedata.igandan.com环境:', getCurrentApiUrl());
|
||||
|
||||
// 恢复原始值
|
||||
Object.defineProperty(window.location, 'hostname', {
|
||||
value: originalHostname,
|
||||
writable: true
|
||||
});
|
||||
}
|
||||
|
||||
console.log('\n=== 测试完成 ===');
|
||||
}
|
||||
|
||||
/**
|
||||
* 在浏览器控制台中运行测试
|
||||
*/
|
||||
if (typeof window !== 'undefined') {
|
||||
// 将测试函数挂载到全局，方便在控制台调用
|
||||
window.testEnv = testEnvironmentDetection;
|
||||
console.log('环境检测测试已准备就绪，请在控制台运行: testEnv()');
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
/*
|
||||
* 环境检测工具
|
||||
*
|
||||
* @Author: xing
|
||||
* @Date: 2025-01-27
|
||||
* @Copyright gdxz
|
||||
*/
|
||||
|
||||
/**
|
||||
* 检测当前环境
|
||||
* @returns {Object} 包含环境信息的对象
|
||||
*/
|
||||
export function detectEnvironment() {
|
||||
// 检测是否为本地环境
|
||||
const isLocal = () => {
|
||||
// 检查主机名
|
||||
if (typeof window !== 'undefined') {
|
||||
const hostname = window.location.hostname;
|
||||
return hostname === 'localhost' ||
|
||||
hostname === '127.0.0.1' ||
|
||||
hostname === '0.0.0.0' ||
|
||||
hostname.includes('192.168.') ||
|
||||
hostname.includes('10.') ||
|
||||
hostname.includes('172.');
|
||||
}
|
||||
|
||||
// 检查环境变量
|
||||
if (import.meta.env.DEV) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
// 检测是否为开发服务器环境
|
||||
const isDevServer = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const hostname = window.location.hostname;
|
||||
return hostname === 'dev-casedata.igandan.com';
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const local = isLocal();
|
||||
const devServer = isDevServer();
|
||||
|
||||
return {
|
||||
isLocal,
|
||||
isDevServer,
|
||||
isLocal: local,
|
||||
isDevServer: devServer,
|
||||
// 根据环境返回对应的API地址
|
||||
getApiUrl: () => {
|
||||
if (local) {
|
||||
return 'http://127.0.0.1:5480';
|
||||
} else if (devServer) {
|
||||
return 'http://dev-casedata.igandan.com:5480';
|
||||
} else {
|
||||
// 其他环境使用默认配置
|
||||
return import.meta.env.VITE_APP_API_URL;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前环境的API基础URL
|
||||
* @returns {string} API基础URL
|
||||
*/
|
||||
export function getCurrentApiUrl() {
|
||||
const env = detectEnvironment();
|
||||
return env.getApiUrl();
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user