文章/答案/技术大牛

发布

社区首页 >问答首页 >我们可以使用没有SSR的vue-meta吗？

问我们可以使用没有SSR的vue-meta吗？
EN

Stack Overflow用户

提问于 2021-05-19 18:39:23

回答 2查看 1.9K关注 0票数 0

我一直在与vue-meta npm包合作更新我的元标记。但是我看到一个问题，我在metaInfo()中的值在中没有正确地呈现。

metaInfo () {
    return {
      title: 'FAQ',
      meta: [
        {name: 'description', content: 'How can we help you?'},
        {property: 'og:title', content: 'How can we help you?'},
        {property: 'og:site_name', content: 'FAQ site'},
        {property: 'og:description', content: 'How can we help you?'}
      ]
    }
  }

如果我们在浏览器中打开devtools，我们可以看到在DOM中附加了元标记。我们现在有两种描述。

我们放在index.html文件中的元描述。
在vue-meta包的帮助下附加在DOM中的元描述。

我读了很多关于vue-meta的文章，我很难找到一个解决方案而不用SSR或Nuxt，这样我们就可以不用SSR使用vue-meta了。

vue.js

seo

nuxt.js

回答 2

Stack Overflow用户

发布于 2021-05-20 07:33:12

不幸的是，这类问题需要在项目开始时提出(SSR或非SSR)，通常会导致决定使用什么。

好消息是努克斯特和伍并没有那么大的不同。因为它只是Vue上面的一个包装器，所以你可以将你当前应用程序的90%投入到它中，而且它应该运行得很好(如果几个月前有人这么做，并且它运行得非常顺利的话)。Nuxt没有太多的缺点，本质上是在Vue之上添加了一些好东西。

您也可以尝试这样做：https://prerender.io/vue-js/ (它确实支持SPAs)

但是，海事组织，您将获得更多的控制和灵活性与Nuxt与SSR (无论是在static或server目标)。

票数 1

Stack Overflow用户

发布于 2021-07-07 13:52:15

是的，这是正确的，如果您想要元标记，应该使用nuxtjs。我面临的问题，因为网站已经建成，但客户要求他也需要元标签。因此，我决定使用index.php而不是index.html，而不是将整个站点迁移到nuxtjs。现在，我可以根据页面类型添加元标记，而不必将整个项目迁移到nuxtjs。

假设构建项目页面后的index.html如下所示

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <link href="/favicon.ico" rel="icon">
    <link href="/assets/fonts/fontawesome-webfont.woff2" rel="stylesheet">
    <link href="/assets/fonts/Edustdy.whtt" rel="stylesheet">
    <link href="/assets/fonts/fontawesome-webfont.woff" rel="stylesheet">
    <link href="/assets/fonts/fontawesome-webfont3e6e.eot" rel="stylesheet">
    <title>default title</title>

    <link href="/css/course.1d10f9e6.css" rel="prefetch">
    <link href="/js/about.b5c0f3ce.js" rel="prefetch">
    <link href="/js/course.d8d75b7d.js" rel="prefetch">
    <link href="/css/app.203f8281.css" rel="preload" as="style">
    <link href="/css/chunk-vendors.e8860705.css" rel="preload" as="style">
    <link href="/js/app.c39400af.js" rel="preload" as="script">
    <link href="/js/chunk-vendors.4cc0d445.js" rel="preload" as="script">
    <link href="/css/chunk-vendors.e8860705.css" rel="stylesheet">
    <link href="/css/app.203f8281.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
    <script src="/js/chunk-vendors.4cc0d445.js"></script>
    <script src="/js/app.c39400af.js"></script>

</body>

</html>

我的要求是仅针对特定页面从API获取元数据，因此index.php看起来类似于

<!DOCTYPE html>
<html lang="">

<head>
<?php

 $current_url = $_SERVER['REQUEST_URI'];
$url = explode('/',$current_url);
if($url[1] == 'course'){
    $response =  shell_exec("curl yourapi.com/course/find?slug=$url[2]");
    $decoded = json_decode($response ,true);
} 
?>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <?php 
    if(!$decoded['courseName']){
        $decoded['courseName'] = "default title";
    }
    ?>
    <meta name="title" content='<?php echo $decoded['courseName'] ?>'>
      <meta name="description" content='<?php echo $decoded['snippet']?>'>
    <meta property="og:type" content="website">
      <meta property="og:url" content="http://yoursite.com/<?php echo $current_url?>">
      <meta property="og:title" content="<?php echo $decoded['courseName']?>">
      <meta property="og:description" content="<?php echo $decoded['snippet']?>">
      <meta property="og:image" content="<?php echo $decoded['thumbnail'] ?>">
      <meta property="og:image:width" content="800" />
<meta property="og:image:height" content="400" />
    <meta itemprop="name">
    <meta property="og:title">
    <meta name="twitter:title">
    <meta name="description">
    <meta itemprop="description">
    <meta property="og:description">
    <meta name="twitter:description">
    <link rel="stylesheet" href="/assets/fonts/fontawesome-webfont.woff2">
    <link rel="stylesheet" href="/assets/fonts/Edustdy.whtt">
    <link rel="stylesheet" href="/assets/fonts/fontawesome-webfont.woff">
    <link rel="stylesheet" href="/assets/fonts/fontawesome-webfont3e6e.eot">

    <title>default title</title>

    <link href="/css/course.1d10f9e6.css" rel="prefetch">
    <link href="/js/about.b5c0f3ce.js" rel="prefetch">
    <link href="/js/course.d8d75b7d.js" rel="prefetch">
    <link href="/css/app.203f8281.css" rel="preload" as="style">
    <link href="/css/chunk-vendors.e8860705.css" rel="preload" as="style">
    <link href="/js/app.c39400af.js" rel="preload" as="script">
    <link href="/js/chunk-vendors.4cc0d445.js" rel="preload" as="script">
    <link href="/css/chunk-vendors.e8860705.css" rel="stylesheet">
    <link href="/css/app.203f8281.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
    <script src="/js/chunk-vendors.4cc0d445.js"></script>
    <script src="/js/app.c39400af.js"></script>

</body>

</html>

现在，元标记可以在google、Facebook、Whatsapp等上使用，但是当您使用PHP时，您可能需要考虑一些安全问题，因为我只在PHP中发送了30分钟。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67609074

复制

相似问题

问我们可以使用没有SSR的vue-meta吗？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我们可以使用没有SSR的vue-meta吗？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我们可以使用没有SSR的vue-meta吗？
EN