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配置
     },
 }
 
      ......
      
}

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="changeLocale('en')">English</button>
    <button @click="changeLocale('zh-cn')">Français</button>
  </div>
</template>

methods: {
  changeLocale(locale) {
  // 在页面中添加 changeLocale 方法，调用 $i18n.setLocale 方法来切换语言
    this.$i18n.setLocale(locale)
  }
}

// 这个方式会发生路由跳转 ！！！   
// !!!!!!!  如果你是使用的 a标签跳转 或者是使用 $router.push跳转 都需要换成nuxt-link标签进行跳转  !!!!!!!!

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

官方是这么说的：

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

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

总结

安装i18n插件 - 在nuxt.config.js中配置 - 使用 - 切换语言
使用computed属性解决

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