當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

uniapp添加网站favicon文件

發布時間：2023/12/10 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 uniapp添加网站favicon文件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

uniapp 默認創建的項目并沒有給我們提供加上網站 favicon 的 ”機會”，但其實官方已經給出解決方法了，使用的是 自定義模板

自定義模板的場景，通常有以下幾種情況：

調整界面 head 中的 meta 配置

補充 SEO 相關的一些配置「僅首頁」

加入百度統計等第三方js

如上，使用 自定義模板 肯定是滿足我們解決添加 favicon 的了，看一下怎么用吧。

1、工程跟項目新建一個 XXX.html 文件，文件名字自己定義，比如 template.html

2、復制基本模板內容到這個html文件，在此基礎上修改meta和引入js；

<!DOCTYPE?html>
<html?lang="zh-CN">
????<head>
????????<meta?charset="utf-8">
????????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????????<meta?name="viewport"?content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0">
????????<title>
????????????<%=?htmlWebpackPlugin.options.title?%>
????????</title>
????????<script>
????????????document.addEventListener('DOMContentLoaded',?function()?{
????????????????document.documentElement.style.fontSize?=?document.documentElement.clientWidth?/?20?+?'px'
????????????})
????????</script>
????????<link?rel="stylesheet"?href="<%=?BASE_URL?%>static/index.<%=?VUE_APP_INDEX_CSS_HASH?%>.css"?/>
????</head>
????<body>
????????<noscript>
????????????<strong>Please?enable?JavaScript?to?continue.</strong>
????????</noscript>
????????<div?id="app"></div>
????????
????</body>
</html>

3、這 head 中加入我們的 favicon 文件

4、在 manifest.json -> h5 -> template 節點中關聯這個html文件的路徑。

ok，運行下項目我肯可以看到已經添加好了。

綜上，關于三種場景的使用方式可以自行擴展了，比如增加百度統計代碼 > uniapp增加百度統計代碼(h5)

最后

博客地址：https://www.cnblogs.com/niceyoo

求關注??，求推薦👍，如果覺得這篇文章有點東西，不妨左上角關注一下我。

總結

以上是生活随笔為你收集整理的uniapp添加网站favicon文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Redis学习笔记1-Redis数据类型
下一篇：游戏开发－从零开始 002