nuxt-i18n 基础配置

介绍

记录一套非常基础的 nuxt-i18n 配置，方便后续项目套用。PS.最好是在项目开始之初就把翻译加上，不然后面改起来人都麻了 =.= , 更多信息可以查阅官方文档：i18n.nuxtjs.org/

安装

# npm
npm install @nuxtjs/i18n

# yarn
yarn add @nuxtjs/i18n

# pnpm
pnpm add @nuxtjs/i18n

设置

// nuxt.config.js
{
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    /* module options */
  },
}

基础配置

// nuxt.config.js
{
    // ...其他配置
    i18n: {
        // 启动懒加载
        lazy: true,
        // 使用组件级别的翻译
        vueI18nLoader: true,
        // 设置翻译文件目录, 从项目根目录开始查找，通常来说是 locales
        langDir: 'locales/',
        // 设置翻译策略, 不同策略对应不同行为，如果我们希望在路由上添加翻译类型作为前缀，例如：/zh/home，可以使用 prefix_except_default
        strategy: 'no_prefix',
        // 默认语言
        defaultLocale: 'en-US',
        // 支持的翻译语言
        locales: [
            {
              code: "en-US",
              iso: 'en-US', // 用于 SEO 优化
              name: "English(US)",
              file: "en-US.json", // locales/ 目录下的翻译文件路径，当开启 lazy 时，这个是必填的
            },
            {
              code: "zh-CN",
              iso: 'zh-Hans',
              name: "简体中文",
              file: "zh-CN.json",
            }
        ],
        // 用于传递给 vue-i18n 的配置
        vueI18n: {
            // 配置回退语言
            fallbackLocale: 'en-US'
        },
        // 启用浏览器语言检测，以便在访问者第一次访问您的站点时自动将其重定向到首选语言环境。
        // nuxt-i18n 会在 cookie 中添加一个用于存储当前语言环境的变量，当我们修改语言时，nuxt-i18n 会更新它
        detectBrowserLanguage: {
          // 启动 cookie
          useCookie: true,
          // 用于存储当前语言环境的变量名
          cookieKey: 'currentLang',
          // (建议用于改进SEO) -仅检测站点根路径(/)上的浏览器区域设置。只有当使用策略而不是“no_prefix”时才有效。
          redirectOn: 'root',
        }
    }
}