Vue-meta 标签不使用 Rails 作为后端更新元标签

如何解决Vue-meta 标签不使用 Rails 作为后端更新元标签

我使用的是 Ruby 2.5.1、Rails 6.0.3.4 和 Vue 2.6。

这里是导轨，

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>This is my back-end title</title>
    <%= csrf_Meta_tags %>
    <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <%= csp_Meta_tag %>
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

对于 vue：

javascript/packs/application.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import App from '../app.vue'
import router from '../routes'
import index from '../stores'
import Meta from 'vue-Meta'

Vue.use(Meta)
Vue.use(Vuex)

let token = document.getElementsByName('csrf-token')[0].getAttribute('content')
let Meta = document.createElement('Meta')
document.getElementsByTagName('head')[0].appendChild(Meta)
axios.defaults.headers.common['X-CSRF-Token'] = token
axios.defaults.headers.common['Accept'] = 'application/json'
document.addEventListener('DOMContentLoaded',() => {
  const el = document.body.appendChild(document.createElement('hello'))
  const app = new Vue({
    el,router,store: index,render: h => h(App),})
  console.log(app)
})

javascript/routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
.....
import AboutUs from './components/LandingPage/Footer/AboutUs.vue'
Vue.use(VueRouter)
export default new VueRouter({
  scrollBehavior() {
    return {x: 0,y: 0}
  },routes: [
    {
      path: '/AboutUs',name: 'AboutUs',component: AboutUs,},...
  ]
)}

AboutUs.vue

<template>
  <div>
    <p> I am about us page </p>
  </div>
</template>

<script>
export default {
  MetaInfo() {
    return {
      title: `About Us`,titleTemplate: '%s - test.com',Meta: [
        {name: 'keywords',content: this.keywords},{name: 'description',content: this.description,vmid: 'description'},{property: 'og:title',content: 'About Us',template: (chunk) => `${chunk} - test.com`,vmid: 'og:title'},{property: 'og:description',template: (chunk) => `${chunk}`,vmid: 'og:description'},],}
  },computed: {
    description() {
      return 'This is about us description' 
    },keywords() {
      return 'apple,ball,cat'
    },}
</script>

当我检查时，我可以看到：

<html>
  <head>
    <title>About Us - test.com</title>`
    <Meta name="csrf-param" content="authenticity_token">
    <Meta name="csrf-token" content="dLn5c24bcel/KwzvAwDSqBhG9EFmt6qwsah8yyLo1pUetoI2PpLLYF/cg4sfguF7DtXhYE0LKie9WJMmjNVdxQ==">
    <style> 
      ......
    </style>
    <Meta>
    <Meta data-vue-Meta="1" name="keywords" content= "apple,cat">
    <Meta data-vue-Meta="1" name="description" content="This is about us description" data- vmid="description">
    <Meta data-vue-Meta="1" property="og:title" content="About Us - test.com" data- vmid="og:title">
  </head>
</html>

在我的本地服务器上，我可以看到来自 vue 的更新标签。

但是当我们进入生产阶段或https://developers.facebook.com/tools/debug/

http://test.com/#/AboutUs

I am getting og:title from backend which is:

这是我的后台标题

和警告如：

推断属性

'og:image' 属性应该明确提供，即使是一个值可以从其他标签推断出来。

缺少属性

缺少以下必需的属性：og:url、og:type、 og:title,og:image,og:description,fb:app_id

Vue-meta 标签不使用 Rails 作为后端更新元标签

如何解决Vue-meta 标签不使用 Rails 作为后端更新元标签

相关推荐