vitepress国际化语言路由后置
时间: 2025-02-19 07:25:44 浏览: 65
### VitePress 中实现国际化语言路由后缀
在 VitePress 配置文件 `config.js` 或 `.vitepress/config.ts` 文件中,通过自定义 Vue Router 实现多语言支持并设置语言作为 URL 的一部分。具体来说,在配置 multilanguage 支持时可以修改默认路径模式来添加语言代码作为前缀或后缀。
对于希望将语言标识符放置于URL结尾的情况,可以通过调整路由规则达成此目的:
```typescript
import { defineConfig } from 'vitepress'
export default defineConfig({
locales: {
'/': {
label: 'English',
lang: 'en-US'
},
'/zh/': {
label: '中文',
lang: 'zh-CN'
}
},
themeConfig: {
nav: [
{ text: 'Home', link: '/' }, // 默认指向根目录下的 index.md
{ text: 'Guide', link: '/guide/' }
]
},
extendPageData(page) {
const localePath = page.relativePath.startsWith('zh/')
? `/zh/${page.fileInfo.name}`
: `/${page.fileInfo.name}`
page.frontmatter.permalink = `${localePath}.html?lang=${page.lang || ''}`;
}
})
```
上述方法利用了 `extendPageData` 函数来自定义页面数据处理逻辑[^1]。每当构建过程中遇到新页面时都会调用该函数,并允许更改即将应用于这些页面的数据属性。这里特别设置了永久链接(permalink),使得最终生成的 HTML 文件名包含了查询参数形式的语言标记[^2]。
为了使这种方案生效,还需要确保服务器端能够正确解析带参数的请求地址;另外客户端 JavaScript 可能也需要相应地更新以适应新的路由结构变化[^3]。
阅读全文
相关推荐

















