VuePress的多语言支持

前言

在我们看Vue的技术文档的时候，都会发现至少有中文版和英文版两个版本，今天小编就带大家一起了解下VuePress的多语言支持，如果对你有帮助的话，记得给小编点个赞！

配置

用 VuePress 的多语言支持，首先需要使用如下的文件目录结构:

docs
├─ README.md
├─ guide.md
├─ study
│  └─ README.md
└─ zh
   ├─ README.md
   ├─ guide.md
   └─ study
      └─ README.md

站点多语言配置

按照上述设置好目录后,我们在配置文件config.js中设置 locales 选项,可以使用的字段有:

VuePress 站点必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象。如果你使用 TypeScript ，你可以将其替换为 .vuepress/config.ts ，以便让 VuePress 配置得到更好的类型提示。

• lang
• title
• description
• head

配置代码:

module.exports = {
  locales: {
    // 键名是该语言所属的子路径
    // 作为特例，默认语言可以使用 '/' 作为其路径。
    '/': {
      lang: 'en-US',
      title: 'VuePress',
      description: 'Vue-powered Static Site Generator',
    },
    '/zh/': {
      lang: 'zh-CN',
      title: 'VuePress',
      description: 'Vue 驱动的静态网站生成器',
    },
  },
}

如果一个语言没有声明 lang, title, description 或者 head ，VuePress 将会尝试使用顶层配置的对应值。如果每个语言都声明了这些值，那么顶层配置中的对应值可以被省略。

主题多语言配置

VuePress 没有限制主题如何提供多语言支持，因此每个主题可能会有不同的多语言配置方式，而且部分主题可能不会提供多语言支持。如果你使用的是默认主题，那么它提供多语言支持的方式和上述是一致的，本文主要配置以默认主题配置展开。

该配置项仅能在默认主题内生效，注意不要和 站点配置 中的 locales 混淆。

配置代码:

module.exports = {
  themeConfig: {
    locales: {
      '/': {
        selectLanguageName: 'English',
      },
      '/zh/': {
        selectLanguageName: '简体中文',
      },
    },
  },
}