网站备案期,seo免费推广,自做网站域名重定向,建设银行网站查开户行1.需求描述
前端项目#xff0c;技术栈使用Vue3Element Plus#xff0c;参考了ruoyi-vue-pro项目与vue-element-plus-admin项目#xff0c;封装了一个Icon组件#xff0c;图标使用的是iconify,项目部署在内网环境#xff0c;不能连接互联网#xff0c;需要部署一套iconi…1.需求描述
前端项目技术栈使用Vue3Element Plus参考了ruoyi-vue-pro项目与vue-element-plus-admin项目封装了一个Icon组件图标使用的是iconify,项目部署在内网环境不能连接互联网需要部署一套iconify图标离线环境使用。Icon组件代码如下。
script langts setup
import { propTypes } from /utils/propTypes
import { useDesign } from /hooks/web/useDesign
import { Icon } from iconify/vuedefineOptions({ name: Icon })const { getPrefixCls } useDesign()const prefixCls getPrefixCls(icon)const props defineProps({// icon nameicon: propTypes.string,// icon colorcolor: propTypes.string,// icon sizesize: propTypes.number.def(16),// icon svg classsvgClass: propTypes.string.def()
})const isLocal computed(() props.icon.startsWith(svg-icon:))// const data computed(() {
// return getIcon(props.icon)
// })const symbolId computed(() {return unref(isLocal) ? #icon-${props.icon.split(svg-icon:)[1]} : props.icon
})const getIconifyStyle computed(() {const { color, size } propsreturn {fontSize: ${size}px,color}
})const getSvgClass computed(() {const { svgClass } propsreturn iconify ${svgClass}
})
/scripttemplateElIcon :classprefixCls :colorcolor :sizesizesvg v-ifisLocal :classgetSvgClass aria-hiddentrueuse :xlink:hrefsymbolId //svgIcon v-else :iconicon :stylegetIconifyStyle //ElIcon
/template
2.方案设计
iconify有一个项目api一个用Node.js写的http服务。 下载所有依赖后把代码部署到内网服务器中启动服务利用Nginx做反向代理暴露此服务设置项目的iconify地址使用离线服务。
3.项目iconify地址设置
此设置比较简单。
第一步安装依赖iconify/vue
npm install --save-dev iconify/vue
第二步在main.ts中引入并进行地址设置
import { addAPIProvider } from iconify/vue;/*** description IconifyAPI相关配置* see {link https://docs.iconify.design/api/providers.html}*/
addAPIProvider(, {// 地址为项目实际部署的地址 请自己替换resources: [http://127.0.0.1:8084],
});
4.api项目部署
项目部署可以docker可以Nginx反向代理我选择的是Nginx反向代理。
第一步 拉取代码
git clone gitgithub.com:iconify/api.git
第二步 下载依赖 依赖下载完成后会多出两个文件夹lib和cache。其中cache是在项目启动后拉取的图标集缓存。 第三步 部署api项目代码到服务器目录 第四步 启动服务配置Nginx反向代理
启动服务直接运行npm run start 就可以然后在Nginx配置文件中配置反向代理重启Nginx搞定。 server {listen 8085;server_name iconify-server;location / {proxy_pass http://localhost:3000;}} 说明api项目的配置在src/config/中具体可以查看api readme文档。 5.效果展示 6.总结
本文是在项目部署内网时图标加载不出来的背景下自己找解决方案的一个总结。由于一般的项目需要使用的图表是很多的所以单个引入离线图标如下图所示是解决不了实际问题的。 最后在Pure Admin项目文档以及作者的视频帮助下部署了离线方案然后自己加入Nginx方案代理实现了自己项目的iconify图标集的离线使用。
本文是自己实现方案的一个总结如有不妥之处欢迎批评指正。
