vue3 语言国际化 vue-i18n

vue3 + vite&webpack + 组合式Api开发；
vue-i18n 相关配置；
vue-i18n 安装、使用案例、教程、setup Api；

---

1、安装 vue-i18n，版本需 9.x 以上！

npm install vue-i18n@9

2、vue-i18n 相关配置、引入方式；

// main.ts
import { createApp,h } from 'vue'
import vueI18n from "@/i18n/index";
const app = createApp(App)
app.use(vueI18n)

// i18n/index.ts
import { createI18n, useI18n } from 'vue-i18n'
import en from './en.js'
import zh from './zh.js'

export default createI18n({
  // 默认语言
  locale: 'zh',

  legacy: false, // 想要同时能在setup语法糖、组合式API相关文件上使用，该项必须设置为 false。  固定false就行了，都vue3了，还想啥呢。。

  // 是否关闭控制台警告
  silentFallbackWarn: false,

  // 配置数字 格式； 用法： $n(1000, 'currency')
  numberFormats: {
    'zh': {
      currency: {
        style: 'currency', currency: 'USD', notation: 'standard'
      }
    },
    'en': {
      currency: {
        style: 'currency', currency: 'JPY', useGrouping: true, currencyDisplay: 'symbol'
      }
    }
  },

  // 设置语言环境
  messages: {
    'zh': zh,
    'en': en,
  },

  // 设置后备语言，当 locale 默认语言没数据时，从该数组内 按顺序从头到尾，在对应的 语言包 里找
  fallbackLocale: [ 'zh', 'en' ],
})

// i18n/zh.js
export default {
  "header": {
      "chat": "聊天"
  },
  animations: {
    lily: '终将成为你',
    slot1: '{c} 蒜', // 命名插入值 写法
    hello: '{0} world {1}', // 数组写法
    repeat: '@:animations.lily <重复的', // 文本引用

    // Modifier 修饰符  > 还可自定义修饰符规则，此处不做介绍，需要用到再去看文档
    sample1: 'liljiahui niu bi',
    test1: '@.upper:animations.sample1  全部 大写', // 全部 大写
    test2: '@.lower:animations.sample1  全部 小写', // 全部 小写
    test3: '@.capitalize:animations.sample1  首字母 大写', // 首字母 大写

    html1: '你好 <span>span标签</span> world', // html 结构

    // vue3 版的，不再需要使用 $tc()， 已经集成到 t() 和 $t() 
    car: '一个小车 | 多个车车',  // 只有2个时候， 不是单数1的，其他统统转译为复数 ！
    apple: 'no apples | one apple | {count} apples', // 该声明方法 需保证声明顺序   无 | 单数 | 复数

    onlyZH: '默认语言有的，其他语言没有，则切换语言后，该内容不会变动',
    // onlyEN: '纯注释，写在这里方便当文档看'   //<> 当默认的zh 没有，则使用设置的 其他语言
  }
}

// i18n/en.js
export default {
  "header": {
      "chat": "chat"
  },
  animations: {
    lily: 'Yagate Kimi ni Naru',
    slot1: '{c} recoil', // 命名插入值 写法
    hello: '{1} world {0}', // 数组写法
    repeat: '@:animations.lily', // 文本引用

    // Modifier 修饰符
    sample1: 'lil JIA hui niu bi',
    test1: '@.upper:animations.sample1  ceshi', 
    test2: '@.lower:animations.sample1  ceshi',
    test3: '@.capitalize:animations.sample1  ceshi',

    html1: 'hello <span>span标签</span> world', // html 结构

    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples',

    // onlyZH: '单纯的注释，无意义，不用管',
    onlyEN: 'en - 中文没有，英文有的，设置后备语言功能' // 当默认的zh 没有，则使用设置的 其他语言
  }
}

3、在组件中使用

<template>
  <div>
    <el-button plain  @click="setLang">切换语言</el-button>
    <el-button type="danger" plain  @click="$router.back()">返回</el-button>
  </div>
  <div>
    {{ $t('header.chat') }}
  </div>
  <div>
    {{ $t('animations.lily') }}
  </div>
  <div>
    {{ $t('animations.slot1', { c: '石'}) }}
  </div>
  <div>
    {{ $t('animations.hello', ['hello','sb2']) }}
  </div>
  <div>
    {{ $t('animations.repeat') }}
  </div>
  <div>
    {{ $t('animations.test1') }}
  </div>
  <div>
    {{ $t('animations.test2') }}
  </div>
  <div>
    {{ $t('animations.test3') }}
  </div>
  <div v-html="$t('animations.html1')"></div>
  <div>
    {{ $t('animations.car',0) }} 》
    {{ $t('animations.car',1) }} 》
    {{ $t('animations.car',2) }} 》
  </div>
  <div>
    {{ $t('animations.apple', 0) }} 》
    {{ $t('animations.apple', 1) }} 》
    {{ t('animations.apple', 66) }} 》: 该写法可直接传入数字，或者照旧对象写法 {count: 4}
    <p>{{ t('animations.apple', {count: '第三个参数指定 无和单复数，该对象则为命名插入值 写法'}, 110) }}</p>
  </div>
  <div>
    {{ $n(10000, 'currency') }}
  </div>
  <div>
    {{ $t('animations.onlyZH') }} -- onlyZH
  </div>
  <div>
    {{ $t('animations.onlyEN') }} -- onlyEN
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();

let lang = 'zh'
function setLang() {
  locale.value = lang  == 'zh' ? 'en' : 'zh' // 更改语言!
  lang = lang == 'zh' ? 'en' : 'zh'
}

</script>

<style lang="less" scoped>
  
</style>

---

此文章质量较低，请凑够行数？

此文章质量较低，请凑够行数？

此文章质量较低，请凑够行数？

此文章质量较低，请凑够行数？

此文章质量较低，请凑够行数？

此文章质量较低，请凑够行数？