uni-app中使用vue2版本在index.html添加的图标编译后会消失

uni-app中使用vue2版本在index.html添加的图标编译后会消失

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/static/logo.png">
<meta charset="UTF-8" />
<script>
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>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

操作步骤：

直接新建项目，选择uniapp,vue版本选择vue2。 然后将<link rel="shortcut icon" href="/static/logo.png">放入index.html的<head>里面。 运行到浏览器，然后浏览器图标不显示，在浏览器是最新版edge和chrome测试。

预期结果：

浏览器标签栏应该正常显示我设置的图标

实际结果：

浏览器标签栏不显示图标，并且编译后添加的代码消失

bug描述：

直接新建项目，选择uniapp,vue版本选择vue2。 然后将<link rel="shortcut icon" href="/static/logo.png">放入index.html的<head>里面。 运行到浏览器，然后浏览器图标不显示，浏览器是最新版edge和chrome。 并且发行后的index.html中添加的这行代码不见了

信息类别 信息内容
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11
HBuilderX类型 正式
HBuilderX版本号 4.65
浏览器平台 Chrome
项目创建方式 HBuilderX

更多关于uni-app中使用vue2版本在index.html添加的图标编译后会消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

vue2 需要自定义模板，参考文档 https://uniapp.dcloud.net.cn/collocation/manifest#h5-template

更多关于uni-app中使用vue2版本在index.html添加的图标编译后会消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是因为uni-app在编译时会重新生成index.html文件，手动修改的index.html内容会被覆盖。正确的做法是在项目根目录的manifest.json中进行配置：

  1. 打开manifest.json
  2. 找到"h5"配置节点
  3. 添加或修改"title"和"favicon"配置项：
"h5": {
    "title": "你的应用名称",
    "favicon": "./static/logo.png"
}

这样配置后，uni-app在编译时会自动将图标信息写入生成的index.html中。注意图片路径要相对于项目根目录，且图片需要放在static目录下。

如果需要在不同平台使用不同图标，可以在pages.json中为每个页面单独配置：

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
            "titleNView": {
                "buttons": []
            }
        },
        "h5": {
            "title": "首页",
            "favicon": "./static/home-icon.png"
        }
    }
}
回到顶部