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

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

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