uni-app 开发的h5打包后网站标题为undefined

项目信息	详细信息
产品分类	uniapp/H5
PC开发环境	Windows
PC开发环境版本	win10
HBuilderX版本	3.99
浏览器	Chrome
浏览器版本	121.0.6167.185（正式版本）（64 位）
项目创建方式	CLI
CLI版本	“@dcloudio/uni-cli-shared”: “3.0.0-3090920231225001”

操作步骤：

发行 -> h5发行，填写了标题，未填写域名，后就打包了。打包后就把代码放到网站托管允许，发现title为undefined。
用 npm run build:h5 也是这样

预期结果：

title为自己填写的title

实际结果：

先是跳了一下自己的title，后面就变成了undefined

bug描述：

网站标题为undefined。manifest.json有填写name，h5.title也有填写，发行时也有填写标题，index.html也有填写标题。没有自己更改title

App下载地址或H5网址：

https://env-00jxg9el284n-static.normal.cloudstatic.cn/cupite/index.html#/

ionicwang 1楼•9 天前

pages.json 中加上 navigationBarTitleText 配置 “globalStyle”: {
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “项目标题”,
“navigationBarBackgroundColor”: “#F8F8F8”,
“backgroundColor”: “#F8F8F8”
},

songsunli 2楼•9 天前

确实好了，谢谢。

h691938207 3楼•9 天前

感觉web配置的页面标题似乎都没啥用

yibo5220 4楼•9 天前

回复丘公子哦:

htzhanglong 5楼•9 天前

在使用 Uni-app 开发 H5 应用时，如果打包后网站标题显示为 undefined，通常是因为没有正确配置页面标题。以下是可能的原因和解决方法：

原因分析

未在 pages.json 中配置页面标题
Uni-app 的页面标题需要在 pages.json 中为每个页面单独配置。
动态设置标题未生效
如果通过 JavaScript 动态设置标题（例如使用 uni.setNavigationBarTitle），可能会因为异步问题导致标题未正确显示。
打包配置问题
在 H5 打包时，可能需要检查 manifest.json 中的配置，确保标题相关设置正确。

解决方法

方法一：在 `pages.json` 中配置页面标题

在 pages.json 中为每个页面添加 navigationBarTitleText 字段，例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们"
      }
    }
  ]
}

方法二：动态设置页面标题

如果需要在页面中动态设置标题，可以使用 uni.setNavigationBarTitle 方法。例如：

export default {
  onLoad() {
    uni.setNavigationBarTitle({
      title: '动态标题'
    });
  }
}

确保在页面生命周期（如 onLoad 或 onShow）中调用该方法。

方法三：检查 `manifest.json` 配置

在 manifest.json 中，确保 H5 相关配置正确。例如：

{
  "h5": {
    "title": "默认标题",
    "router": {
      "mode": "history"
    }
  }
}

方法四：检查打包后的 `index.html`

在 H5 打包后，检查生成的 index.html 文件，确保 <title> 标签中有正确的标题。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>默认标题</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>