uniapp添加网站favicon文件

最新推荐文章于 2023-12-22 13:08:31 发布

谁动了我的bug

最新推荐文章于 2023-12-22 13:08:31 发布

阅读量1.4k

点赞数

分类专栏： Uni-app 文章标签： css3

本文为whhtjl原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_35393693/article/details/121633015

版权

Uni-app 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在uniapp项目中，若要添加网站favicon，官方推荐使用自定义模板方法。步骤包括：1.创建template.html并复制基础模板内容；2.在head部分插入favicon链接；3.在manifest.json中关联html文件路径。完成以上步骤后，运行项目即可看到favicon已成功添加。

摘要由CSDN通过智能技术生成

uniapp 默认创建的项目并没有给我们提供加上网站 favicon 的 ”机会”，但官方给出的解决方法是使用自定义模板
自定义模板的场景，通常有以下几种情况：

调整界面 head 中的 meta 配置
补充 SEO 相关的一些配置「仅首页」
加入百度统计等第三方js
如上，使用自定义模板可以满足我们解决添加 favicon，使用步骤如下：
1、工程根项目新建一个 XXX.html 文件，文件名可自定义，比如 template.html，我这里直接用了创建项目时自带的index.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">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </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 文件

<link rel="icon" href="static/img/favicon.ico">

4、在 manifest.json -> h5 -> template 节点中关联这个html文件的路径。
在这里插入图片描述
ok，运行下项目我肯可以看到已经添加好了。

谁动了我的bug

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录