# kderp-treasurer-front

**Repository Path**: ruakuoluo/kderp-treasurer-front

## Basic Information

- **Project Name**: kderp-treasurer-front
- **Description**: 开发时候请谁用dev分支
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-18
- **Last Updated**: 2025-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 司库资金监控前端avic-kd-front-capmonitor
## 快速开始
- [ ] 安装node.js、vue、npm
- [ ] 执行 npm install 命令安装依赖
- [ ] 执行 npm run serve 命令启动服务
- [ ] 浏览器访问 http://localhost:8003
- [ ] 开发时如果遇到跨域问题可以通过代理解决：将.env.development配置文件中的VUE_APP_URL配置为'/api'，修改vue.config.js中devServer->proxy->'/api'的值为对应后端的地址，然后重启服务即可。

## 打包
- [ ] 根据需打包的环境执行打包命令，例如开发环境执行 npm run build:dev
不同环境对应不同配置文件：.env.环境，例如开发环境：.env.dev
- [ ] 配置参数说明：
```
#环境参数，development：本地调试，开发人员使用；production：打包部署使用
NODE_ENV = 'production'

#当前环境：dev-开发、test-测试、sit-sit测试、uat-uat测试、production-生产
VUE_APP_ENV = 'dev'

#后端接口地址
VUE_APP_URL = 'http://192.168.137.201:8080'
#是否通过window.location.origin获取后端地址，会根据浏览器当前地址来决定后端地址，需保证前后端处于同一域名，并通过/houduan前缀将识别后端接口代理至后端网关
VUE_APP_URL_ORIGIN_ENABLED = 0

#base url
BASE_URL = './'

#是否启用门户统一身份认证:0-否、1-是，为1时会跳转至门户单点登录
VUE_APP_IAM_ENABLED = 1

#门户统一身份认证地址：http(s)://[不同环境的 SSO 域名]/sign/authz/cas/{appId}?service=https://app.example.com
#appId是门户给本系统颁发的唯一识别标识
VUE_APP_IAM_URL = https://test-idaas.avicnet.cn/sign/authz/cas/345740444349587456

```

## 部署注意事项

- [ ] 打包部署前确认对应配置文件中配置是否正确
- [ ] 部署时需要解决跨域问题，简单来说前后端服务必须处于同一域名（ip）下，否则浏览器在发送后端请求时不会将会话（session）传递给后端,解决方式如下
   1. 把前端和后端部署在一台机器上（不可取）。
   2. 用前端服务的Nginx启用一个其他端口反向代理后端服务，例如将8080端口代理至后端服务，配置方式可以去网上搜哈。
   3. 与前端使用相同端口，也是使用代理不同的是通过location识别是否后端接口然后再进行代理，例如将所有带有"/houduan"前缀的请求代理至后端服务（此处需要注意代理至后端服务时要把"/houduan"）这个前缀去掉再转发给后端服务。配置方式同样去网上搜哈。
- [ ] 当配置VUE_APP_URL_ORIGIN_ENABLED = 1时程序做了特殊处理，会默认使用上面的方式3解决跨域问题，所以部署时候必须要把"/houduan"代理至后端。同时程序通过获取浏览器window.location.origin来获取后端接口地址，因此不需要为内外网单独发布前端服务了，是不是很棒棒！
- [ ] 项目使用了websocket，Nginx需要配置一下才能支持websocket请求转发。即在后端反向代理配置中增加相面的配置。
```
#它表明是websocket连接进入的时候，进行一个连接升级将http连接变成websocket的连接。
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
```