替换uni-app中H5的默认图标

最新推荐文章于 2024-07-24 22:09:51 发布

偷懒的加菲

最新推荐文章于 2024-07-24 22:09:51 发布

阅读量2.9k

点赞数

分类专栏：前端 uniapp 文章标签： vue uniapp

本文链接：https://blog.csdn.net/hl449006540/article/details/109237060

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

在使用uni-app开发前端，发布为H5形式的时候，浏览器标题的左上角会有Vue默认的标志，如下图所示，我们希望把它替换成需要的新图标。
Gitee参考代码

首先把要修改的图标文件放在static目录下，并重命名为favicon.ico，然后在根目录下新建template.html文件，粘贴以下代码到template.html中

<!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" />
		<link rel="icon" type="image/png" sizes="32x32" href="./static/favicon.ico">
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>