美文网首页
uniapp添加网站favicon文件

uniapp添加网站favicon文件

作者: niceyoo_ | 来源:发表于2020-01-20 09:16 被阅读0次

    前言

    uniapp 默认创建的项目并没有给我们提供加上网站 favicon”机会”,但其实官方已经给出解决方法了,使用的是 自定义模板

    自定义模板的场景,通常有以下几种情况:

    1. 调整界面 head 中的 meta 配置
    2. 补充 SEO 相关的一些配置「仅首页
    3. 加入百度统计等第三方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>
            <!-- built files will be auto injected -->
        </body>
    </html>
    
    3、这 head 中加入我们的 favicon 文件
    <link rel="icon" type="image/png" sizes="32x32" href="http://img.sscai.club/favicon1.png”>
    
    4、在 manifest.json -> h5 -> template 节点中关联这个html文件的路径。
    image

    ok,运行下项目我肯可以看到已经添加好了。

    image

    综上,关于三种场景的使用方式可以自行扩展了,比如增加百度统计代码 > uniapp增加百度统计代码(h5)

    最后

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

    求关注❤️,求推荐👍,如果觉得这篇文章有点东西,不妨左上角关注一下我。

    相关文章

      网友评论

          本文标题:uniapp添加网站favicon文件

          本文链接:https://www.haomeiwen.com/subject/arxjzctx.html