如何在自定义 VuePress 组件中使用 vue-i18n？

Question

我正在使用 .vuepress/components/ 目录中的 VuePress framework to build a multilingual website for my project. The Internationalization Guide in the VuePress docs is quite helpful, but it doesn't explain, how to translate custom Vue.js components。

据我所知，最好的解决方案是将 vue-i18n 插件与 VuePress 集成，但似乎没有关于如何集成的指南？

Answer 1

这可能不是完美的解决方案，但它按预期工作：

按照 Internationalization Guide 并设置多个语言环境。
安装 vue-i18n：npm i vue-i18n.
假设您使用的是默认主题，我们将扩展它以将 vue-i18n 挂接到其中。创建自定义主题目录：mkdir ./.vuepress/theme/.
在新建的主题目录下添加一个index.js文件：

// .vuepress/theme/index.js

module.exports = {
  extend: '@vuepress/theme-default' // extend the default VuePress theme
}

通过将另一个文件添加到同一目录来安装 vue-i18n，enhanceApp.js 文件允许您执行一些操作 App Level Enhancements:

// .vuepress/theme/enhanceApp.js

import VueI18n from 'vue-i18n'

export default ({ Vue, options }) => {
  Vue.use(VueI18n);

  options.i18n = new VueI18n({
    locale: 'en',
  });
}

在您的自定义组件中，您可以设置传递给全局计算的当前语言环境属性 $lang:

// .vuepress/components/Foo.vue

export default {
  mounted() {
    this.$i18n.locale = this.$lang;
  },
  i18n: {
    messages: {
      'en-US': { title: 'Foo' },
      'de-DE': { title: 'Bar' }
    }
  }
};

我找不到挂接到根组件以全局设置当前语言环境的简单解决方案。也许其他人有关于如何很好地实现这一目标的提示？

如何在自定义 VuePress 组件中使用 vue-i18n？

How to use vue-i18n in custom VuePress components?

vue.js

vuepress