# localVue3

**Repository Path**: jxmlearner/localVue3

## Basic Information

- **Project Name**: localVue3
- **Description**: 通过cdn的方式使用vue3和element-plus
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-04
- **Last Updated**: 2026-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Gulp 开发服务器项目

这是一个使用 Gulp 构建的开发环境，用于本地访问 UReport 报表页面，支持代理转发功能。

## 功能特性

- ✅ 本地开发服务器 (端口: 3000)
- ✅ 代理转发 `/ureport` 请求到后端服务
- ✅ 热重载 (文件修改后自动刷新页面)
- ✅ 构建打包功能
- ✅ 清理功能

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
# 或者
gulp serve
```

服务器将在 `http://localhost:3000` 启动。

### 3. 访问页面

打开浏览器访问: `http://localhost:3000/index.html`

### 4. 构建项目

```bash
npm run build
# 或者
gulp build
```

构建后的文件将输出到 `dist` 目录。

## 代理配置

当前配置了以下代理规则：

- `/ureport/*` → `http://localhost:8080/ureport/*`
  - 用于代理 UReport 后端服务请求
  - 包括资源文件、API 接口等

### 自定义代理配置

你可以在 `gulpfile.js` 文件中修改 `proxyConfig` 对象来自定义代理设置：

```javascript
const proxyConfig = {
  '/ureport': {
    target: 'http://your-backend-server:port', // 修改为你的后端服务地址
    changeOrigin: true,
    secure: false,
    // 其他配置...
  },
  // 添加更多代理规则
  '/api': {
    target: 'http://localhost:8081',
    changeOrigin: true,
  }
};
```

## 可用命令

| 命令 | 描述 |
|------|------|
| `gulp serve` | 启动开发服务器 |
| `gulp build` | 构建项目 |
| `gulp clean` | 清理 dist 目录 |
| `gulp help` | 显示帮助信息 |
| `gulp` | 默认任务 (等同于 serve) |

## 项目结构

```
├── index.html          # UReport 报表页面
├── gulpfile.js        # Gulp 配置文件
├── package.json       # 项目配置
├── README.md          # 说明文档
└── dist/              # 构建输出目录
```

## 环境要求

- Node.js 16.15.0
- npm 或 yarn

## 开发说明

### 热重载

修改以下文件会触发页面自动刷新：
- `*.html` 文件
- `*.css` 文件  
- `*.js` 文件

### 代理调试

启动服务器后，控制台会显示代理请求的详细信息，包括：
- 请求方法和 URL
- 代理目标路径
- 错误信息（如有）

### 常见问题

1. **代理失败**: 确保后端 UReport 服务在 `http://localhost:8080` 运行
2. **端口冲突**: 修改 `gulpfile.js` 中的 `port` 配置
3. **文件不刷新**: 检查 `gulp.watch` 配置的文件路径

## 配置说明

### 服务器配置

```javascript
connect.server({
  root: '.', // 静态文件根目录
  port: 3000, // 服务器端口
  livereload: true, // 启用热重载
  middleware: [/* 代理中间件 */]
});
```

### 代理中间件

使用 `http-proxy-middleware` 实现请求代理，支持：
- 路径重写
- 请求头修改
- 错误处理
- 日志记录

## 注意事项

- 确保后端 UReport 服务正常运行
- 代理配置中的 `target` 地址要与实际后端服务地址匹配
- 如需支持 HTTPS，请在代理配置中设置 `secure: true` 

u欠费统计明细表
http://localhost:4000/index.html?_u=file:u%E6%AC%A0%E8%B4%B9%E7%BB%9F%E8%AE%A1%E6%98%8E%E7%BB%86%E8%A1%A8.ureport.xml&checkPointCode=REPORT_ORG_TREE&_t=0,1,4,5,6,7,8&memberId=2503&appId=1987&orgId=977