nuxtjs配置i18n多语言、切换语言data中数据不起作用解决方案_nuxt i18n

i18n多语言简介

         官方介绍，I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。简单来说就是能有助于我们项目进行多语言配置，实现一套系统多种语言的一个插件。

实现

实现起来那其实也很简单，跟着官方文档进行肯定是没问题的。但是在官方文档中介绍的是在vue中的使用方法。看标题就知道肯定不是再把不饿中的说一下，那么这篇文章咱就来说一下在nuxtjs中使用i18n的话要做哪些配置。网上的方案配置很多、很杂，下面是的是我自己整理出来的，可以参考一下。

1. 第一步

首先是要下载安装我们的i18n插件依赖。安装指令：
        npm install --save @nuxtjs/i18n
        
    ！！！！！！ 这里千万不要下载错了   
        错误命令：npm install vue-i18n     // 这是vue中的

2. 第二步
   

在项目的根目录中找到nuxt.config.js文件  在里面进行i18n的配置
    // nuxt的配置文件 nuxt.config.js
    export default {
    
          ......
          
      modules: [
        '@nuxtjs/i18n'
      ],
      i18n: {
      // 指定支持的语言列表。
      //每个语言都需要指定 code（语言代码）、name（语言名称）、file（存储语言翻译信息的文件名）等属性。
         locales: [
             { name_cn: "英文", name: "English", code: "en", file: "en-US.json" },
             {
               name_cn: "中文",
               name: "简体中文",
               code: "zh-cn",
               file: "zh-CHS.json",
             },
            ......
         ],
         lazy: true,    // 是否使用懒加载，即是否在需要的时候才加载翻译文件
         langDir: "locales/",     // 存储语言翻译信息的目录
         defaultLocale: "en",   // 默认语言
         vueI18n: {
               fallbackLocale: "en",   // 使用i18n配置
         },
     }
     
          ......
          
    }

注释 ：基本配置

      

// 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',
        }
    }
}

关于刷新页面 语言会重置为初始语言的问题 我不太清楚具体情况，但是原因可能是因为配置中的detectBrowserLanguage导致， 默认为true 跟随浏览器语言展示，改为false即可

3. 第三步

创建我们的语言文件 -- json文件
    因为我指定的目录为locales/    所以我就在locales文件夹中进行创建   --- locales文件夹在根目录
    // locales/en-US.json
    {
        "desc":"detailed introduction !"
    }
 
    // locales/zh-CHS.json
    {
        "desc":"详细的介绍 !"
    }

4. 第四步
   

在页面中使用的方式
    1.第一种方式 -- 直接在结构层使用
    <template>
      <div>
        {{ $t('desc') }}
      </div>
    </template>
    
    2.第二种方式 -- 在data中使用
    methods: {
      data(){
          return{
              desc:this.$t('desc')
          }
       }
    }

 5. 切换语言的方法

// 在页面上添加一个语言切换按钮：
    <template>
      <div>
        <button @click="switchLocalePath('en')">English</button>
        <button @click="switchLocalePath('zh-cn')">Français</button>
      </div>
    </template>
    
 
    
    // 这个方式会发生路由跳转 ！！！   
    // !!!!!!!  switchLocalePath是官方提供的切换语言的方法  !!!!!!!!

！！！！！补充

// 在进行 路由跳转的时候请使用官网给的特定方法进行跳转，不然跳转后会出现重置为初始语言的情况！！！！！！！！！！！！！！！！！
 
示例：<nuxtLink>标签
<nuxt-link :to="localePath('/login')">登录</nuxt-link>
 
示例：普通标签
<div @click="$router.push(localePath('/login'))">登录</div>
 
示例：js中路由跳转
this.$router.push(this.localePath('/login'))
 
 
 
 

6. 切换语言时data中数据不起作用/变换的解决方案

官方是这么说的：

将this.$t() 写到了data属性里，切换语言不起作用data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。官方的解决办法是，建议我们将表达式写到computed属性里，不要写到data里。

 所以我们就按照官方给的解决方案，使用computed属性
    
    computed:{
        desc(){
            return this.$t('desc')
         }
     }