Commit 243772d0 authored by 祁新's avatar 祁新

fix: 修改功能菜单图标扩展配置图片显示地址

parent ba73ffff
# LDP前端框架功能菜单图标扩展配置
当前前端框架功能菜单图标使用`svg`格式, 默认图标都是使用项目文件夹`src\icons\svg`中的`svg`图标文件。如需要配置其他图标显示,则需要采用外部扩展方式来动态添加图标。
当前前端框架功能菜单图标使用`svg`格式, 默认图标都是使用项目文件夹`src/icons/svg`中的`svg`图标文件。如需要配置其他图标显示,则需要采用外部扩展方式来动态添加图标。
扩展图标操作说明:
> 推荐使用[iconfont字体图标库](https://www.iconfont.cn/), 字体图标大小`128*128`, 纯色字体。
- 进入字体图标库
![1608112180075](..\imgs\icon\iconfont.png)
![1608112180075](../imgs/icon/01访问Iconfont.png)
- 登录账号(可以使用`github` 账号登录)
- 搜索需要的图标![1608114092658](..\imgs\icon\search-result.png)
![1608285433134](../imgs/icon/02登录.png)
- 搜索需要的图标
![1608285547839](../imgs/icon/03搜索图标.png)
- 添加图标入库
![1608114350342](..\imgs\icon\search-add.png)
![1608114350342](../imgs/icon/04添加图标入库.png)
- 保存图标到项目中
![1608169908950](..\imgs\icon\1608169908950.png)
![1608169908950](../imgs/icon/05查看入库图标.png)
![1608170283435](..\imgs\icon\1608170283435.png)
![1608170283435](../imgs/icon/06添加项目.png)
![1608170373278](..\imgs\icon\1608170373278.png)
![1608170373278](../imgs/icon/07加入到项目.png)
![1608170419215](..\imgs\icon\1608170419215.png)
![1608170419215](../imgs/icon/08查看项目图标.png)
- 下载图标文件集成到系统中
![1608170483164](..\imgs\icon\1608170483164.png)
![1608170483164](../imgs/icon/09下载图标.png)
- 将图标文件`iconfont.js`解压到框架项目中的`public\icon`目录下,如果不存在`icon`目录请手动新建。
- 将图标文件`iconfont.js`解压到框架项目中的`public/icon`目录下,如果不存在`icon`目录请手动新建。
![1608170757363](..\imgs\icon\1608170757363.png)
![1608170757363](../imgs/icon/10解压图片文件.png)
-`icon`目录下新建`config.json` 配置文件
```javascript
...file in icon/config.json
{
"files": "iconfont.js" // 定义加载的字体图标文件名, 默认是当前路径下。
// 可以为数组形式加载多个图标文件, 如下
// "files": ["iconfont.js", "iconfont-plus.js"]
}
```
```javascript
...file in icon/config.json
{
"files": "iconfont.js" // 定义加载的字体图标文件名, 默认是当前路径下。
// 可以为数组形式加载多个图标文件, 如下
// "files": ["iconfont.js", "iconfont-plus.js"]
}
```
![1608190281495](../imgs/icon/11图标文件.png)
![1608190281495](..\imgs\icon\1608190281495.png)
- 在系统中菜单维护中配置菜单图标
![1608190499947](..\imgs\icon\1608190499947.png)
![1608190499947](../imgs/icon/12配置菜单图标.png)
- 把下载的图标文件按照上面文件同样配置到`example`应用脚手架中
![1608190613099](..\imgs\icon\1608190613099.png)
![1608190613099](../imgs/icon/13配置文件到项目中.png)
![1608190704882](..\imgs\icon\1608190704882.png)
![1608190704882](../imgs/icon/14系统中查看图标.png)
......
......@@ -54,7 +54,7 @@ proxy: {
* proxyLocalPath 代理转发的路由匹配地址
* 默认项目中使用`axios`封装的接口请求默认需要拼接上process.env.VUE_APP_BASE_API
*
* proxyLocalPriority 使用其他库请求接口或者静态资源的匹配地址
* proxyLocalSecond 使用其他库请求接口或者静态资源的匹配地址
* 不需要拼接process.env.VUE_APP_BASE_API
*
* rewriteTargetPath 重写的实际请求地址路径。如果需要跟路径地址转换则需要配置
......@@ -64,7 +64,7 @@ proxy: {
*/
const proxyLocalServer = `http://192.168.0.106:8800`
const proxyLocalPath = process.env.VUE_APP_BASE_API + '/example-service'
const proxyLocalPriority = '/example-service'
const proxyLocalSecond = '/example-service'
const rewriteTargetPath = ''
// 代理设置对象
proxy: {
......@@ -82,11 +82,11 @@ proxy: {
}
},
// 第二种用其他请求方式的代理转发
proxyLocalPriority: {
proxyLocalSecond: {
target: proxyLocalServer,
changeOrigin: true,
pathRewrite: {
'^' + proxyLocalPriority: rewriteTargetPath
'^' + proxyLocalSecond: rewriteTargetPath
}
},
/**
......@@ -104,12 +104,13 @@ proxy: {
```
列举几个代理匹配的例子
> 目标匹配地址: `proxy`中的`target`参数
> 重写的实际地址: `rewriteTargetPath`变量
> 重写匹配规则: `proxy`中的`target`参数
>
> 重写值: `rewriteTargetPath`变量
| 实际接口地址 | 项目中访问地址 | 目标匹配地址 | 重写的实际地址 |
| --------------------------------------- | -------------------- | -------------------- | ---------------------------------- |
| `http:192.168.0.106:8800/user/userinfo` | `/user/userinfo` | `^/user` | `'/user'` |
| `http:192.168.0.106:8800/user/userinfo` | `/api/user/userinfo` | `^/api` | `''` |
| `http:192.168.0.106:8800/user/userinfo` | `/api/user/userinfo` | `^/api/user` | `'/user'` |
| 前端请求地址 | 重写匹配规则 | 重写值 | 实际接口地址 |
| -------------------- | -------------------- | ---------------------------------- | ---------------------------------- |
| `/user/userinfo` | `^/user` | `'/user'` | `http:192.168.0.106:8800/user/userinfo` |
| `/api/user/userinfo` | `^/api` | `''` | `http:192.168.0.106:8800/user/userinfo` |
| `/api/user/userinfo` | `^/api/user` | `'/user'` | `http:192.168.0.106:8800/user/userinfo` |
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