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

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

1. 跟着 国际化指南》并设置多个语言环境。
2. 安装 VUE-国际化：npm i vue-i18n。
3. 假设您使用的是默认主题，我们将对其进行扩展以将vue-i18n挂钩到其中。创建一个自定义主题目录：mkdir ./.vuepress/theme/。
4. 将index.js文件添加到新创建的主题目录：

// .vuepress/theme/index.js

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

5. 通过将另一个文件添加到同一目录来安装vue-i18n，该enhanceApp.js文件使您可以进行一些应用程序级增强：

// .vuepress/theme/enhanceApp.js

import VueI18n from 'vue-i18n'

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

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

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

// .vuepress/components/Foo.vue

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

我发现没有简单的解决方案可以挂接到根组件上以全局设置当前语言环境。也许其他人对如何实现这一目标有暗示？