1

我尝试使用nuxt-property-decorator在 nuxtjs 中添加元标签,但只添加了标题标签,但没有添加其他元标签

而且我也使用了 vue-meta包,但我也未能解决这个问题

  1. 这就是我的代码的样子:

    <script lang="ts">
    import { Component, Vue, Prop } from "nuxt-property-decorator";
    
    @Component({
          metaInfo:{
                title: 'Default  Title',
                titleTemplate: '%s | vue-meta Example App',
    
                meta: [
                    { charset: 'utf-8' },
                    { vmid: 'description', name: 'description', content: 'this is a description'}
                ]
            },
            components: {
    }
    })
        export default class HomePage extends Vue {
    }
    

从上面的代码只添加标题标签

  1. 尝试使用 Nuxtjs文档代码:

<script lang="ts">
    import { Component, Vue, Prop } from "nuxt-property-decorator";

    @Component({
          head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  

    },
 

components: {
        }
            })
   

    export default class HomePage extends Vue {
            }
        </script>

它没有添加任何东西

  1. 即使以这种方式尝试,这也不起作用
@Component({
                  head: {
            title: 'my website title',
            meta: [
              { charset: 'utf-8' },
              { name: 'viewport', content: 'width=device-width, initial-scale=1' },
              {
                hid: 'description',
                name: 'description',
                content: 'my website description'
              }
            ],
            link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
          }

  1. 其他方式在类中添加代码。没用。
export default class PwHomePage extends Vue {
        

        head() {
      return {
        title: "Default  Title",
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ]
      }
        }
  1. 另一种方式。
export default class PwHomePage extends Vue {
        

        metaInfo() {
  return {
    title: 'Default  Title',
    titleTemplate: '%s | vue-meta Example App',
    meta: [{
      vmid: 'description',
      name: 'description',
      content: "this.description",
    }]
  }
}
        }
4

1 回答 1

1

嘿我解决了这个问题试试这个代码。

@Component({
    asyncData({ params, error }): Promise<any> {
        ...
    },

    metaInfo(this: MyPageClass): object {
            return {
            title: this.myAsyncData,
            titleTemplate: '%s | vue-meta Example App',
            
            meta: [
              {name: 'description',content: 'This is Free Projects  Page'},
              {property:"og:title",content: "Epiloge - Build your network in your field of interest"},
              {property:"og:type",content: "website"},
              {name:"robots",content: "index, follow"},

            ],
            
       };
   }
})

class MyPageClass extends Vue {
    myAsyncData?: string

感谢FreekVR的回答链接

于 2021-02-24T13:09:17.960 回答