发布于 

Vuepress使用重定向解决默认语言问题

前言

Vuepress 默认情况下使用/作为默认语言路径,这导致默认语言文件在文件层级上会比其他语言的文件高一级(下图),影响美观和维护,本教程将使用vuepress-plugin-locale-redirect插件修复此问题。

1
2
3
4
5
6
7
8
9
10
docs
├─ README.md
├─ foo.md
├─ nested
│ └─ README.md
└─ zh
├─ README.md
├─ foo.md
└─ nested
└─ README.md

修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
docs
├─ zh
│ ├─ README.md
│ ├─ foo.md
│ └─ nested
│ └─ README.md
├─ en
│ ├─ README.md
│ ├─ foo.md
│ └─ nested
│ └─ README.md
└─ ja
├─ README.md
├─ foo.md
└─ nested
└─ README.md

开始配置

步骤一: cd到你的vuepress程序目录

步骤二:在终端中使用npm安装vuepress-plugin-locale-redirect插件,如果你使用的是其他包管理软件,那么将npm指令更换为你的包管理软件即可

1
npm vuepress-plugin-locale-redirect

步骤三:在config.js(ts)文件头中添加引用插件

1
import { localeRedirectPlugin } from 'vuepress-plugin-locale-redirect'

步骤四:在config的网页设置文件中添加引用(我这里用的是ts格式,如果你用的是js的话,应该是module.exports = {}这种格式),不要直接复制粘贴,参考你本地的代码做修改。也可以参考完整示例代码(有bug,请勿直接复制其他区域)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export default defineUserConfig({
title: '示例文件',
description: '示例文件源码',
//引用插件
plugins: [
// @ts-ignore
localeRedirectPlugin(),
],
//添加路径
locales: {
//写在最上方的语言将被认为是默认语言
'/zh/': {
lang: 'zh-CN',
title: '',
description: '',
},
'/en/': {
lang: 'en-US',
title: '',
description: '',
},
'/ja/': {
lang: '日本语',
title: '',
description: '',
},
},

完成~

如果要为主题,例如下拉菜单设置多语言,可参考官方文档,将其中的/改为你想要的默认语言即可


如果遇到问题请在下方的联系方式里联系我 使用请遵守MIT协议