1***@qq.com
1***@qq.com
  • 发布:2022-04-28 23:13
  • 更新:2022-08-30 10:38
  • 阅读:667

【报Bug】<page-meta>组件在H5没有得到想要的效果

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.3.13

浏览器平台: Chrome

浏览器版本: 100.0.4896.127

项目创建方式: HBuilderX

操作步骤:

以下是代码
index.html代码

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <!-- <link href="https://unpkg.com/ant-design-vue@3.2.2/dist/antd.min.css" rel="stylesheet"> -->  
        <!-- <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>  
        <script src="https://unpkg.com/ant-design-vue@3.2.2/dist/antd.min.js"></script> -->  
        <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>  
            <!-- <link href="https://primefaces.org/primevue/themes/saga-blue/theme.css" rel="stylesheet"> -->  
            <meta name="keyword" :content="title" />  
        </head>  
    </page-meta>  
    <view class="content">  

        <Button>aaaaaaaaaaaa </Button>  
    </view>  
</template>  

<script>  
    // console.info("primevue", primevue)  
    // import {AButton} from 'ant-design-vue'  
    export default {  
        components: {  
            // 'a-button': AButton  
        },  
        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上面

2022-04-28 23:13 负责人:DCloud_uni-ad_HDX 分享
已邀请:
VIE

VIE

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

mvlyforever

mvlyforever

<meta name="keyword" :content="title" />

title 换成 keyword 试试?

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

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

该问题目前已经被锁定, 无法添加新回复