AI 助理
备案控制台
开发者社区 云计算 文章 正文

umi打包时favicon.ico图标丢失问题

2022-05-13 1071
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： umi打包时favicon.ico图标丢失问题

目录



问题背景

在document.ejs中使用link标签相对路径引入文件。


<link rel="icon" type="image/x-icon" href="./img/favicon.ico" />

会发现打包完document.ejs文件不会改变，仍然加载./img/favicon.ico。


而./img中的文件被打包到static，根本就不存在./img/favicon.ico这个路径图片。


解决方法


在src同级创建一个public文件夹，在umi约定中该文件夹内容会被原封不动的打包到dist。

image.png

因此我们可以在public创建img文件夹，把favicon.ico放入，打包完dist会存在img/favicon.ico

document.ejs中的link的href修改为/img/favicon.ico，确保从根目录访问，就可以访问到了。

在下月亮有何贵干
目录
相关文章
凯小默
|
Web App开发 JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
凯小默
1479 0
liuyunshengsir
|
前端开发 JavaScript
umi 中useSearchParams 的使用样例
在umi中，`useSearchParams`是一个React Hook，用于获取和操作URL查询参数。以下是一个使用`useSearchParams`的样例： 首先，确保你已经安装了umi和react-router-dom。 1. 在页面组件中使用`useSearchParams`来获取和操作URL查询参数： ```javascript import { useSearchParams } from 'umi'; export default function SearchPage() { const [searchParams, setSearchParams] = useSea
liuyunshengsir
1550 2
爱你三千遍斯塔克
Vue3，setup的使用需要搭配return进行使用，Vue3中带setup的script的标签和不带能不能合并到一起，export default不能放到setup里会报错，script
Vue3，setup的使用需要搭配return进行使用，Vue3中带setup的script的标签和不带能不能合并到一起，export default不能放到setup里会报错，script
爱你三千遍斯塔克
355 0
chnjames
|
机器学习/深度学习 前端开发 JavaScript
WebAssembly：让前端性能突破极限的秘密武器
WebAssembly（简称 WASM）作为前端开发的性能加速器，能够让代码像 C++ 一样在浏览器中高速运行，突破了 JavaScript 的性能瓶颈。本文详细介绍了 WebAssembly 的概念、工作原理以及其在前端性能提升中的关键作用。通过与 JavaScript 的配合，WASM 让复杂运算如图像处理、3D 渲染、机器学习等在浏览器中流畅运行。文章还探讨了如何逐步集成 WASM，展示其在网页游戏、高计算任务中的实际应用。WebAssembly 为前端开发者提供了新的可能性，是提升网页性能、优化用户体验的关键工具。
chnjames
5941 2
WebAssembly：让前端性能突破极限的秘密武器
liuyunshengsir
|
前端开发 JavaScript
react-qr-code的第三方库来将URL转换成二维码图片
在React中，你可以使用一个叫做react-qr-code的第三方库来将URL转换成二维码图片并保存。首先，你需要安装这个库： ``` npm install react-qr-code ``` 然后，在你的组件中引入react-qr-code： ``` import QRCode from 'react-qr-code'; ``` 接着，在render方法中使用QRCode组件，将URL作为一个属性传递进去： ``` render() { const url = 'https://www.example.com'; return ( <div> <Q
liuyunshengsir
1353 0
周周的奇妙编程
|
存储 人工智能 算法
【阿里云产品测评】揭秘阿里云向量检索服务：赋予智能时代搜索新“维度”
【1月更文挑战第3天】在数字化洪流席卷全球的今天，信息的表达与检索方式正在悄然变革。从字符到图像，再到复杂的多维度数据，我们正在步入一个深度理解、精准匹配的智能搜索新时代。此刻，阿里云推出的向量检索服务正以前沿技术之力，引领这一领域的创新潮流。 阿里云向量检索服务，内核采用自研的Proxima引擎，其强大之处在于能够实现水平拓展、全托管和云原生的高效向量检索。这就好比构建了一个可以无限延伸的“知识宇宙”，无论是大规模图像识别、语音识别模型生成的特征向量，还是复杂的大模型知识库结构化信息，都能通过向量化的形式被管理和高效检索。
周周的奇妙编程
183209 6
前端技术栈
|
JavaScript 小程序
JS控制input输入特殊字符
JS控制input输入特殊字符
前端技术栈
219 0
赵小左
|
自然语言处理 前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板（二）新增一个页面与如何添加国际化
【Ant Design Pro】使用ant design pro做为你的开发模板（二）新增一个页面与如何添加国际化
赵小左
1190 0
【Ant Design Pro】使用ant design pro做为你的开发模板（二）新增一个页面与如何添加国际化
下一站丶
ant-design-vue将英文改为中文 DatePicker日期控件
ant-design-vue将英文改为中文 DatePicker日期控件
下一站丶
1311 0
聪小陈
|
缓存 移动开发
网友需求 - 使用 50 行代码在 Ant Design Pro 中完成 Umi 状态保持的多tabs布局
网友需求 - 使用 50 行代码在 Ant Design Pro 中完成 Umi 状态保持的多tabs布局
聪小陈
2344 1
网友需求 - 使用 50 行代码在 Ant Design Pro 中完成 Umi 状态保持的多tabs布局

热门文章

最新文章

  • 1
    获取网络时间（国家标准时间）
  • 2
    使用阿里云容器服务Jenkins 2.0实现持续集成之the tag you want篇(updated on 2017.09.06)
  • 3
    【知云】第十期：如何保障云上游戏安全？云盾+高防IP筑起云上安全高墙
  • 4
    手把手教你 WordPress 使用阿里云 CDN 教程，让你的网站飞起来
  • 5
    5分钟，使用yum方式完成mysql安装
  • 6
    四十万个数据库上云，阿里云支持了银泰、最多跑一次
  • 7
    Java应用频繁FullGC分析
  • 8
    TortoiseSVN 执行清理( cleanUp )失败的解决方案
  • 9
    请勿滥用 2PC prepared transaction
  • 10
    如何使用Log4j
  • 1
    集之互动AI视频服务助力企业实现降本增效
    39
  • 2
    定了！阿里云服务器租赁优惠价格表11月最新，一年、1个月和1小时收费标准
    82
  • 3
    阿里云百炼API-KEY在哪查看？百炼api调用方法整理
    72
  • 4
    《PNG转ETC2的底层逻辑与跨平台实践指南》
    45
  • 5
    《WebGL浏览器渲染优化指南：解决隐性损耗的底层逻辑与实操技巧》
    43
  • 6
    从漏洞到攻击链：一次看懂黑客的思维链路
    44
  • 7
    可观测性数据：既要降本，也别把有用信号丢了
    44
  • 8
    分布式存储三国杀：对象存储 vs HDFS vs 列式存储，到底该怎么选？
    41
  • 9
    Debian网络延迟排查指南（从零开始诊断网络卡顿问题）
    40
  • 10
    基于python大数据的新能源汽车数据分析系统
    48

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    全面了解阿里云OSS使用方法