vue 场景下基于 vue-i18next 进行处理，api一致，如需更多功能可查询官方网站

npm install @volcengine/i18n

入口文件

import Vue from 'vue'
import App from './App.vue'
import vueI18n from '@volcengine/i18n/dist/vue';

const i18n = vueI18n.init({
  lng: 'en',
  backend: {
    namespace: 39174,
    operatorId: 2100041130,
    apiKey: '704dbe7057f511ec8e4aedf71dc34d4f',
    projectId: 4568,
  }
}, Vue)

new Vue({
  render: h => h(App),
  i18n: i18n
}).$mount('#app')

切换语种

<template>
 <button @click="e => $i18n.i18next.changeLanguage('zh')">切换</button>
</template>

文案替换-正常

<template>
// { zh: { normal: '正常' }, en: { normal: 'normal' } }
  <div>{{$t('normal')}}</div> // zh: 正常 en: normal
</template>

文案替换-带插值-1
特别提示：国际化翻译平台插值默认都以单花括号 {}

<template>
// { zh: { placeholder: '我是{name}' }, en: { placeholder: 'i am {name}' } }
 <div>{{$t('placeholder', { name: 'starling' })}}</div> // zh: 我是starling en: i am staring
</template>

文案替换-带插值-2

<template>
// { zh: { placeholder: '我是{name}' }, en: { placeholder: 'i am {name}' } }
<div v-t="{ path: 'placeholder', args: { name: 'starling' } }"></div> // zh: 我是starling en: i am staring
</template>

文案替换-富文本且带插值

/**
 * { 
 * zh: { vue_rich_text: '我接受 {0}.' }, 
 * en: { vue_rich_text: 'I accept {0}.' }
 * }
 */
<i18next path="vue_rich_text" tag="label">
	<a href="#" target="_blank">starling</a>
</i18next>

文案替换-icu格式
需要提前安装icu-i18next
在本实例中是通过 num 插值去判断是否为复数

<template>
// { zh: { icu: '{num, plural, other {人}}' }, en: { icu: '{num, plural, one {person} other {persons}}' } }
  <div>{{$t('icu', { num: 1 })}}</div> // zh: 人 en: person
</template>

changeLanguage

改变当前应用语种

• language 当前语种码

this.$i18n.i18next.changeLanguage('zh')

$t

• key 国际化平台key值
• args object 插值对象

<template>
// { zh: { normal: '正常' }, en: { normal: 'normal' } }
  <div>{{$t('normal')}}</div> // zh: 正常 en: normal
</template>

v-t

运行时对文案进行替换

简单使用

<template>
// { zh: { normal: '正常' }, en: { normal: 'normal' } }
  <div v-t="normal"></div> // zh: 正常 en: normal
</template>

插值使用

• path: string 国际化平台key值
• language: language, optional
• args: object, optional 插值对象

<template>
// { zh: { placeholder: '我是{name}' }, en: { placeholder: 'i am {name}' } }
<div v-t="{ path: 'placeholder', args: { name: 'starling' } }"></div> // zh: 我是starling en: i am staring
</template>

v-waitForT

会等待文案拉取完成再显示该节点；
可以将此指令放在主要页面根节点，确保文案下载完成后才会渲染页面

<template>
// { zh: { normal: '正常' }, en: { normal: 'normal' } }
  <div v-waitForT>{{$t('normal')}}</div> // zh: 正常 en: normal
</template>