Nuxt 项目如何配置 nuxt-i18n


nuxt-i18n 是 Nuxt 对 Vue I18n 的集成,与 Vue I18n 在 Vue CLI 创建的项目的配置方法上有所不同,相关资料也比较少。

配置步骤

  1. yarn add nuxt-i18n 下载 nuxt-i18n;
  2. 在根目录下创建 locales 文件夹,里面包含所需的国际化 json 文件,如:en.json、zh.json;
  3. 在 nuxt.config.js 中的 modules 内添加 ‘nuxt-i18n’,并新增 i18n 配置(此处设置默认语言为中文)。 2021-07-24_nuxt_config_增加-nuxt-i18n置.png
  4. 使用如 <nuxt-link :to="switchLocalePath('en')">EN</nuxt-link> 的代码切换至英文页面。
  5. 使用如 <nuxt-link :to="localePath('/')">{{ $t('nav_index') }}</nuxt-link> 的代码将根据当前语言跳转到相应语言的页面。 2021-07-24_nuxt_使用nuxt-i18n.png

参考:

  1. https://github.com/nuxt-community/i18n-module
  2. https://phrase.com/blog/posts/nuxt-js-tutorial-i18n/