主页 / 问题 / 924995
Accepted
Pavel8289
Asked:2020-12-25 00:51:04 +0000 UTC2020-12-25 00:51:04 +0000 UTC

VueJS、i18n 和 vue-meta 如何与这一切交朋友

  • 772

我正在使用i18n语言更改插件以及vue-meta页面上的元标记插件。i18n 插件非常适合更改站点语言。但是要更改页面的元数据，不知道如何将它们全部连接起来。

App.vue 看起来像这样。如果只在其中写入文本，metaInfo 可以很好地加载信息。虽然它是静态工作的，但是当站点语言发生变化时，如何使字段中的信息动态变化？

export default {
        name: 'name',
        metaInfo: {
            title: 'название страницы', // set a title
            titleTemplate: '%s - продолжение название страницы', // %s  required
            htmlAttrs: {
                lang: 'ru',
                amp: undefined // "amp" has no value
            },
            meta: [
                {   'name':'og:title',
                    'content': 'название',
                },
                {   'name':'metatitle',
                    'content': 'название',
                },
                {   'name':'og:description',
                    'content': 'описание',
                },
                {   'name':'description',
                    'content': 'описание',
                }

            ]

        },
        data(){return{}}
vue.js

2 个回答

  1. Best Answer

    被标记为正确的答案 - 我认为不太正确。因为我根据自己的经验知道 Open Graph 元数据不适用于这种方法。因为只有在 vuejs（哪个框架都没有关系）挂载实例、设置其内部事物、然后才将文本添加到指定字段后，才会生成元数据。虽然所有这些都已设置好，但 SEO 机器人已经处理了该页面，并且在其上什么也看不到。你可以在这里查看https://developers.facebook.com/tools/debug

    要解决这个问题，您需要生成静态 html，并准备好数据。服务器端渲染可以帮助解决这个问题，我建议阅读这个https://ssr.vuejs.org/ru

    您也可以在这些情况下使用 ssr 模板https://ru.nuxtjs.org/，但是如果项目已经编写好，有一堆代码，一般来说，旋转和旋转怎么办？啊？简而言之，我通过添加一个 webpack 插件https://github.com/chrisvfritz/prerender-spa-plugin解决了这个问题。一切都很容易设置。

    就我而言，在构建文件夹中，我在文件中添加了以下内容webpack.prod.conf.js（点是某种代码）

    ...
const PrerenderSpaPlugin = require('prerender-spa-plugin')
...
const webpackConfig = merge(baseWebpackConfig, {
...
   plugins: [
   ...
      new PrerenderSpaPlugin(
         path.resolve(__dirname, '../dist'),
         ['/en', '/ru', '/en/jobs', '/ru/jobs'],
         {}
      ),
   ...
   ]
})
...

    执行命令后，文件夹中会生成额外的带有静态html文件的文件夹，也就是所有页面npm run build的文件夹。dist

    在此处输入图像描述

    这是一个很好的教程https://www.youtube.com/watch?v=pwHdFPEX4NA

    • 1

  2. 只需仔细阅读文档 :)

     import {Meta} from '../meta.js'

export default {
        name: 'pagecalc',
        metaInfo() {
            return {
                title: this.MetaData[0]['title'], // set a title
                titleTemplate: this.MetaData[0]['titleTemplate'], // %s  required
                htmlAttrs: this.MetaData[0]['htmlAttrs'],
                meta: this.MetaData[0]['meta']
            }
        }

       computed: {
        language() {
            return this.$store.getters.languages
        },
        MetaData(){
            return Meta[this.$store.getters.languages]['Homepage']
        }

    },

    }

    元.js

    export const Meta = {
ru:{
        Homepage: {
        title: 'навание', // set a title
        titleTemplate: '%s - название', // %s  required
        htmlAttrs: {
            lang: "ru",
            amp: undefined // "amp" has no value
        },
        meta: [
            {
                'name': 'og:title',
                'content': 'Описание',
            },
            {
                'name': 'metatitle',
                'content': 'Описание',
            },
            {
                'name': 'og:description',
                'content': 'Описание',
            },
            {
                'name': 'description',
                'content': 'Описание',
            }

        ]
    }


    },
en: {
    Homepage: {
        title: 'навание', // set a title
        titleTemplate: '%s - название', // %s  required
        htmlAttrs: {
            lang: "ru",
            amp: undefined // "amp" has no value
        },
        meta: [
            {
                'name': 'og:title',
                'content': 'Описание',
            },
            {
                'name': 'metatitle',
                'content': 'Описание',
            },
            {
                'name': 'og:description',
                'content': 'Описание',
            },
            {
                'name': 'description',
                'content': 'Описание',
            }

        ]
    }


},

    }

    • 0

相关问题