uni-app <page-meta>组件在H5平台未达预期效果

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

操作步骤：

以下是代码

index.html代码

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <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>

page页面

<template>  
    <page-meta page-style="color: green" root-font-size="16px">  
        <head>  
            <meta name="keyword" :content="title" />  
        </head>  
    </page-meta>  
    <view class="content">  
        <Button>aaaaaaaaaaaa </Button>  
    </view>  
</template>  

<script>  
    export default {  
        components: {  
        },  
        data() {  
            return {  
                keyword: '',  
            }  
        },  
        serverPrefetch() { // 仅vue3版本支持  
            this.keyword = "ServerKeyword"  
        },  
    }  
</script>

预期结果：

替换到head得meta


### 实际结果：


没有替换

bug描述：

vue3 使用了ssr
代码参考:https://uniapp.dcloud.io/component/page-meta.html

head标签
新增于HBuilderX 3.3.0
vue3 下还可以使用在page-meta内使用浏览器原生 head 标签，此用法仅 vue3 版本可用，方便在编译为 ssr 时进行 seo 优化。
我使用上面代码, 发现并没有没有拷贝到head上面

phonegap100 1楼•18 天前

我测试也不行，感觉是个BUG

yibo5220 2楼•18 天前

itying888 3楼•18 天前

运行时需要在菜单勾选启用SSR

htzhanglong 4楼•18 天前

在 uni-app 中，<page-meta> 组件用于设置页面的元信息，例如页面的标题、导航栏样式、下拉刷新等。然而，<page-meta> 组件在不同平台上的支持程度可能有所不同，尤其是在 H5 平台上，可能会出现未达预期效果的情况。

以下是一些常见的问题和解决方案：

1. H5 平台不支持 `<page-meta>` 组件

问题描述：在 H5 平台上，<page-meta> 组件的某些功能可能无法正常工作，或者根本不被支持。

解决方案：对于 H5 平台，可以使用 document.title 来设置页面标题，或者使用 uni.setNavigationBarTitle 来设置导航栏标题。

// 设置页面标题
document.title = '页面标题';

// 设置导航栏标题
uni.setNavigationBarTitle({
  title: '导航栏标题'
});

2. 页面样式未生效

问题描述：在 H5 平台上，通过 <page-meta> 设置的页面样式（如背景色、字体颜色等）可能未生效。

解决方案：可以直接在页面的样式文件中设置页面的样式，或者使用 uni.setNavigationBarColor 来设置导航栏的颜色。

// 设置导航栏颜色
uni.setNavigationBarColor({
  frontColor: '#ffffff', // 前景色
  backgroundColor: '#000000' // 背景色
});

3. 下拉刷新未生效

问题描述：在 H5 平台上，通过 <page-meta> 设置的下拉刷新可能未生效。
解决方案：可以使用 uni.startPullDownRefresh 和 uni.stopPullDownRefresh 来手动控制下拉刷新。
```
// 开始下拉刷新
uni.startPullDownRefresh();

// 停止下拉刷新
uni.stopPullDownRefresh();
```

4. 页面生命周期未触发

问题描述：在 H5 平台上，通过 <page-meta> 设置的页面生命周期事件（如 onPageScroll）可能未触发。
解决方案：可以直接在页面的 onPageScroll 生命周期函数中处理页面滚动事件。
```
export default {
  onPageScroll(e) {
    console.log('页面滚动', e);
  }
}
```

5. 页面元信息未更新

问题描述：在 H5 平台上，通过 <page-meta> 设置的页面元信息（如标题、导航栏样式等）可能未及时更新。

解决方案：可以在页面的 onShow 生命周期函数中手动更新页面元信息。

export default {
  onShow() {
    document.title = '新的页面标题';
    uni.setNavigationBarTitle({
      title: '新的导航栏标题'
    });
  }
}