i18n を使用する場合、Vue3 はバージョン 9.* を使用する必要があります
"vue-i18n": "^9.2.2"
目次
1. ダウンロードして使用する
npm
npm install vue-i18n@9糸
yarn add vue-i18n@9言語
1.1. 構成の作成
lang フォルダーを作成し 、その中に cn.ts、en.ts、および最も重要な index.ts を作成します。
cn.ts
const messages = {
home: {
title: '书城',
hint: '计算机科学和软件工程',
guessYouLike: '猜你喜欢'
}
}
export default messagesa.ts
const messages = {
home: {
title: 'Book Store',
hint: 'Computer Science And Software Engineering',
guessYouLike: 'Guess You Like',
}
}
export default messages
index.ts
import { createI18n } from 'vue-i18n'
import en from './en'
import cn from './cn'
//引入的不同语言文件
const messages = {
en, cn
}
//这个类型可以自己配置，毕竟每个人做的都不一样
const i18n:any =createI18n( {
legacy: false, // 使用 Composition API 模式，则需要将其设置为false
globalInjection: true, //全局生效$t
locale: 'cn', // 默认cn翻译
messages //ES6解构
})
export default i18n;他のファイルを構成する場合は、追加できます
vue的 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './lang/index.js'
const app = createApp(App)
app.use(i18n);
app.mount('#app')1.2. 基本的な使い方
どのコンポーネントでも、次の図と同じです。
パラメータを使用します。
- path: 必須、ロケール情報のキー
- ロケール: オプション、ロケール (これは 1.1 で構成されており、ピニアまたはストレージによって変更できます)
- args: オプション、リストまたは名前付きフォーマット用 (2.0 で述べた)
<template>
//使用 $t
<span> {
{ $t("home.title") }} </span>
//使用 t （要解构）
<p>{
{t("home.title")}}</p>
//使用v-t , 这个数据是没有的，只是用来展示如何使用v-t
<p v-t="{path:'title',args: {count: 10 }}"></p>
//使用翻译组件
// keypath:必传,和上面path参数一样 tag:可选，转为什么标签
// locale:可选，要用哪个语言环境 scope：可选，全局还是局部 `global` or `parent`
// i18n:可选，优先级比scope高，参数也多，用的也不多，就不介绍了
<i18n-t keypath='home.title' tag="p" locale='en' scope="global"></i18n-t>
</template>
<script setup lang='ts'>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<style lang='less' scoped></style>1.3、この時点で警告が表示されます
警告：vue-i18n の esm-bundler ビルドを実行しています。機能フラグ グローバルを明示的にブール値リテラルに置き換えて、最終的なバンドルで適切なツリー シェイキングを取得するようにバンドラーを構成することをお勧めします。
インストール
npm install @intlify/vite-plugin-vue-i18nvite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'
//引入resolve
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
//配置vueI18n
vueI18n({
include: resolve(__dirname, './path/to/src/locales/**')
})]
})
2.補間
以下のcn.ts ファイルのみを変更します
2.1、名前付き補間
補間を定義する
const messages = {
home: {
title: `书城{a}{b}`,
}
}
export default messages使用
<template>
<p>
{
{ $t("home.title", {a:'123',b:'9999'}) }}
</p>
</template>効果
2.2. リスト補間
補間を定義する
const messages = {
home: {
title: `书城{0}{1}`,
hint: '计算机科学和软件工程{0}',
guessYouLike: '猜你喜欢'
}
}
export default messagesリスト補間は、0 から始まる口ひげの構文シーケンスを定義します。
注:使用する場合、配列の添字は {} ブラケット内のリスト値に対応します
使用
<template>
<p>
{
{ $t("home.title", ['一二','四五六']) }}
</p>
<p>
{
{ $t("home.hint", ['123']) }}
</p>
</template>効果
2.3、テキスト補間
リテラル補間は、主にメッセージ形式構文の特殊文字に役立ちます。
例: { } @ $ |
これらは、メッセージでは直接利用できません。
定義形式: {' X '} 括弧内に引用符を使用
const messages = {
home: {
title: `书城{'{'}这是一个书城{'}'}`,
}
}
export default messages
「Book City{This is a Book City}」のようにタイトルを直接 使用すると 、エラーが報告されます。
翻訳:メッセージ コンパイル エラー: プレースホルダーの無効なトークン 'これは書店です'
3・メッセージ
3.1、リンクされたメッセージ (関連情報)
役割：異なる価値観をまとめる
フォーマット: @:キー
//定义 ，这不是cn.ts文件的只是修改下，把代码减少
export default {
book:'流浪地球',
author:'刘慈欣',
cover: "@:book - @:author",
}
//使用
<template>
<p>
{
{ $t("cover", ) }}
</p>
</template>
3.2、組み込み修飾子 (組み込み修飾子)
フォーマット: @.修飾子:キー
upper: リンク メッセージのすべての文字を大文字にします
Lower: リンク メッセージのすべての文字を大文字にします
capitalize: リンク メッセージの最初の文字を大文字にします
export default {
homeAddress: 'Home address',
upper: '@.upper:homeAddress'
}
<template>
<p>{
{ $t('homeAddress') }}</p>
<p>{
{ $t('upper') }}</p>
</template> 
3.3. カスタム修飾子
const i18n:any =createI18n( {
locale: 'cn', // 默认cn翻译
messages,
// 在' modifiers '选项设置自定义修饰符
modifiers: {
//别问为什么是any，问就是不知道怎么解决
snakeCase: (str:any) => str.split(' ').join('_')
}
})使い方も3.2と同じ
export default {
homeAddress: 'Home address',
upper: '@.snakeCase:homeAddress'
}
3.4、HTML メッセージ (HTML 情報)
html タグを使用してから v-html を使用して解析することもできますが、v-html の要件は自分で明確にする必要があります。
//定义
export default {
cover:'hello <br> world'
}
//使用
<template>
<p v-html="$t('cover')"></p>
</template>
4. 複数化（多様化）
export default {
car: 'car | cars',
apple: 'no apples | one apple | {count} apples'
}
//使用------
<template>
<p>{
{ $t('car', 1) }}</p>
<p>{
{ $t('car', 2) }}</p>
<p>{
{ $t('apple', 0) }}</p>
<p v-t="{ path: 'apple',args: 2 }"></p>
<p>{
{ t('apple', 1) }}</p>
<p>{
{ $t('apple', 10, { count: 10 }) }}</p>
// plural:必传，9.2.2的预期不够好，不能绑定对象，只能绑定值
<i18n-t keypath="message.plural" :plural="n">
//要给传的复数，并且还要写值下来，就算是唯一一个值也要写，不然就是空
<template #count> {
{ n }} </template>
</i18n-t>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const n= ref(4)
</script>
//结果------
<p>car</p>
<p>cars</p>
<p>no apples</p>
<p>2 les</p>
<p>one apple</p>
<p>10 les</p>
<p>4 les</p>多様化をサポートするいくつかの方法は次のとおりです。 上記の $tc に加えて
1. $tc (レガシーが true に設定されている場合にのみ有効です。使用してもかまいません)
2. vt custom コマンド (i18n でカスタマイズ、1.2 基本的な使い方を参照)
3. 組み込みの翻訳コンポーネント (i18n-t) (現在は推奨されていません。より面倒です)
4. 分解 t を使用して i18n を使用する
5.グローバル$tを注入し、
事前定義された暗黙のパラメーター
暗黙パラメーターは (キー値、暗黙パラメーター、{xxx:x}) の 2 番目のパラメーターを参照し、3 番目は表示パラメーターです。
暗黙のパラメーターは 2 番目に定義された値を指定できますが、その優先度は 3 番目のパラメーターほど高くありません。
例えば：
//定义 export default { apple: 'no apples | one apple | {count} les | { count } apples ' } //使用 <template> <p>{ { $t('apple', 0) }}</p> //结果 no apples <p>{ { $t('apple', 1) }}</p> //结果 one apple <p>{ { $t('apple', 2) }}</p> //结果 2 les <p>{ { $t('apple', 3) }}</p> //结果 3 les <p>{ { $t('apple', 4, { count: 10 }) }}</p> //结果 4 les </template>最後の行は期待した効果が得られませんでした.これはおそらくバグです.結局のところ、これは変化しており、実際には安定していません.
私の期待は10個のりんごですが、どこに行くのかわかりません
カスタマイズする複数の複数形の定義。それ以外の場合は、最初の複数形のみが表示されます
カスタム固有の外観: vue-i18n 公式 Web サイト
中国語の Web サイト (公式 Web サイトではありません。バージョンは 8.* です。特定の参照があります): Vue I18n v8.x マニュアル