vue3 场景下基于 i18next-vue 进行处理，api一致，如需更多功能可查询官方网站
vue3 版本支持需要@volcengine/i18n版本 >= 1.0.3

入口main.js

import { createApp } from 'vue'
import App from './App.vue'
import vueI18n from '@volcengine/i18n/dist/vue3';
import ICU from 'i18next-icu';
import LanguageDetector from 'i18next-browser-languagedetector'

const app = createApp(App)
vueI18n.use(ICU).use(LanguageDetector).init({
  debug: true,
  fallbackLng: 'en',
  backend: {
    namespace: 39174,
    operatorId: 2100041130,
    apiKey: '704dbe7057f511ec8e4aedf71dc34d4f',
    projectId: 4568,
  }
}, app).then(()=> {
    app.mount('#app');
})

setup hooks

<script setup>
import { computed } from 'vue'
import { useTranslation } from '@volcengine/i18n/dist/vue3';
const { i18next, t } = useTranslation();
</script>

渲染文案

<template>
  <div>{{ $t('normal') }}</div> // 内置$t 全局变量
  <div>{{ t('normal') }}</div>  // useTranslation 返回 t 
</template>

插值

<template>
	<div>{{ $t('placeholder', { name: 'starling' }) }}</div>
	<div>{{ t('placeholder', { name: 'starling' }) }}</div>
</template>

切换语言

<template>
  <div>
    <div>{{ $i18next.language }}</div>
    <div>{{ i18next.language }}</div>
    <button @click="()=> $i18next.changeLanguage('zh')">切换中文</button>
    <button @click="()=> i18next.changeLanguage('en')">切换英文</button>
  </div>
</template>