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

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网址：


更多关于uni-app 开发的h5打包后网站标题为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

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

更多关于uni-app 开发的h5打包后网站标题为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


确实好了，谢谢。

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

回复 丘公子哦:

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

原因分析

  1. 未在 pages.json 中配置页面标题
    Uni-app 的页面标题需要在 pages.json 中为每个页面单独配置。

  2. 动态设置标题未生效
    如果通过 JavaScript 动态设置标题（例如使用 uni.setNavigationBarTitle），可能会因为异步问题导致标题未正确显示。

  3. 打包配置问题
    在 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>
回到顶部