Commit b5d1da1b authored by 祁新's avatar 祁新

feat: 添加LDP前端框架功能菜单图标扩展配置和工程联调配置说明文档。

parent 488138a1
# LDP前端框架功能菜单图标扩展配置
当前前端框架功能菜单图标使用`svg`格式, 默认图标都是使用项目文件夹`src\icons\svg`中的`svg`图标文件。如需要配置其他图标显示,则需要采用外部扩展方式来动态添加图标。
扩展图标操作说明:
> 推荐使用[iconfont字体图标库](https://www.iconfont.cn/), 字体图标大小`128*128`, 纯色字体。
- 进入字体图标库
![1608112180075](..\imgs\icon\iconfont.png)
- 登录账号(可以使用`github` 账号登录)
- 搜索需要的图标![1608114092658](..\imgs\icon\search-result.png)
- 添加图标入库
![1608114350342](..\imgs\icon\search-add.png)
- 保存图标到项目中
![1608169908950](..\imgs\icon\1608169908950.png)
![1608170283435](..\imgs\icon\1608170283435.png)
![1608170373278](..\imgs\icon\1608170373278.png)
![1608170419215](..\imgs\icon\1608170419215.png)
- 下载图标文件集成到系统中
![1608170483164](..\imgs\icon\1608170483164.png)
- 将图标文件`iconfont.js`解压到框架项目中的`public\icon`目录下,如果不存在`icon`目录请手动新建。
![1608170757363](..\imgs\icon\1608170757363.png)
-`icon`目录下新建`config.json` 配置文件
```javascript
...file in icon/config.json
{
"files": "iconfont.js" // 定义加载的字体图标文件名, 默认是当前路径下。
// 可以为数组形式加载多个图标文件, 如下
// "files": ["iconfont.js", "iconfont-plus.js"]
}
```
![1608190281495](..\imgs\icon\1608190281495.png)
- 在系统中菜单维护中配置菜单图标
![1608190499947](..\imgs\icon\1608190499947.png)
- 把下载的图标文件按照上面文件同样配置到`example`应用脚手架中
![1608190613099](..\imgs\icon\1608190613099.png)
![1608190704882](..\imgs\icon\1608190704882.png)
## PS: 自定义图标请先上传到`iconfont`平台然后在添加项目中一起下载出来解压到`icon` 文件夹中。
\ No newline at end of file
# LDP前端脚手架工程联调配置说明
## 脚手架默认配置说明
> 在开发环境中脚手架默认代理转发`/dev-api `头的请求地址。
```javascript
// .env.development
// 默认代理转发的请求前缀
VUE_APP_BASE_API = '/dev-api'
// 默认代理服务器地址
VUE_APP_PROXY_SERVER = 'http://47.103.46.222:9080'
// 网关登录相关配置
VUE_APP_ID = 'app-ui'
VUE_APP_REALMCODE = 'app'
// 授权登录跳转的路由地址, 开发环境下默认是VUE_APP_PROXY_SERVER + VUE_APP_AUTH_SERVICE
VUE_APP_AUTH_SERVICE = 'ldp-service/login'
```
```javascript
// vue.config.js vue代理转发配置
proxy: {
// 请求代理的前缀路由地址
[process.env.VUE_APP_BASE_API]: {
// 目标服务器地址
target: process.env.VUE_APP_PROXY_SERVER,
changeOrigin: true,
pathRewrite: {
// 重写路由地址将process.env.VUE_APP_BASE_API 开头地址重写成''
// 假设请求地址为/dev-api/mcs-service/user/userinfo
// 也就是/dev-api开头地址的会自动转换为 'http://47.103.46.222:9080/mcs-service/user/userinfo' 进行代理请求
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
```
## 联调说明
> 通常情况下平台都需要登录才能进行接口访问, 也就是需要从授权登录页面获取到token,然后再进行操作, 那么就需要先配置 授权的相关信息。
> 如果只是服务器地址变化,则修改 `VUE_APP_PROXY_SERVER` 即可。
>
> 后端本地联调则需要进行路由转发配置, 假设后端访问的接口是`example-service/user/userinfo`
```javascript
// vue.config.js
// 如果用框架内部的`request` 或`this.$http` 请求的话默认会拼接
const proxyPath = process.env.VUE_APP_BASE_API + '/example-service'
// 如果是其他方式比如说一个资源请求,或者第三方库自带内部的请求
const otherPath = '/example-service'
// 代理设置对象
proxy: {
// 第一种默认请求方式的代理转发
proxyPath: {
target: `http://192.168.0.106:8800`,
changeOrigin: true,
pathRewrite: {
'^' + proxyPath: ''
}
},
// 第二种用其他请求方式的代理转发
otherPath: {
target: `http://192.168.0.106:8800`,
changeOrigin: true,
pathRewrite: {
'^' + otherPath: ''
}
},
// 默认的配置
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_PROXY_SERVER,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment