如何使用子目录库配置 Nuxt app i18n 本地化？答案

【问题标题】：How to configure Nuxt app i18n localization with a subdirectory base?如何使用子目录库配置 Nuxt app i18n 本地化？
【发布时间】：2022-06-23 20:33:10
【问题描述】：

我正在 Nuxt 上构建一个在子目录 (example.com/blog) 上运行的博客。现在我需要启用 i18n 模块，但我正在为 URL 结构而苦苦挣扎。

如何实现在 example.com/en/blog 下运行“en”语言和在 example.com/se/blog 下运行“se”语言？

提前致谢！

【问题讨论】：

到目前为止你做了什么？检查了文档？
这将有你需要的所有答案i18n.nuxtjs.org

标签： nuxt.js nuxt-i18n

【解决方案1】：

以下是 Nuxt/i18n 模块的文档中关于路由的说明：

@nuxtjs/i18n 覆盖 Nuxt 默认路由，为每个 URL 添加语言环境前缀（no_prefix 策略除外）。

来源：@nuxt/i18n - Routing

为了说明，让我们按照您提供的示例使用以下文件夹结构：

project folder/
    pages/
     ---- index.vue/
     ---- blog.vue/

为了构建应用程序的路由，Nuxt/i18n 将读取您在nuxt.config.js 上提供的语言环境，并相应地构建路由（请参阅the documentation 以可视化构建的路由）。

这意味着如果您在配置文件中提供两个语言环境（即fr 和en），并且我们假设en 是默认设置，您最终会得到以下路由结构：

EN 路线

本地主机:3000/
localhost:3000/博客

FR 路线

本地主机:3000/fr
localhost:3000/fr/blogs

为澄清起见，以下是有关如何在 nuxt.config.js 文件中配置 i18n 模块的文档：

https://i18n.nuxtjs.org/basic-usage

【讨论】：