vue3 で vue-i18n を使用します (ts で $t を使用します。vue3 はこれを使用しません)

vue プロジェクトの多言語ツールが使用している vue-i18n。
以前使用されていた vue2 には大きな問題はなく、構成後に t (「属性名」) を使用するだけで、vue3 は実際にはあまり変更されていません。
しかし、設定が完了した後、 html で使用するのに問題はなく$t()、コピーライティングを示すすべてが正常です。しかし、ts でメソッドを使用して$t()エラーを報告したところ、後でグローバル メソッドを設定していないことがわかりました$t()。

vue3 で vue-i18n を使用する方法を記録します。

1. vue-18n をインストールする
2. 構成
3. 応用
4. ts で簡単に使用できるようにグローバル メソッド $t をマウントします (このレコードの焦点)

多くの人が 1.2.3. を書いているので、簡単に書きます. インターネット上の多くのブログが html での $t の使用についてしか書いていないことがわかったので、このレコードの焦点は 4 です。 ts で使用することもできます。

1. インストール

npm install vue-i18n@next 或 yarn add vue-i18n@next

2. src ディレクトリに新しい lang を作成し、新しい index.ts ファイルを作成します

import App from '@/App.vue'
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import enLocale from './en/index';
import zhLocale from './zh/index';

const messages = {
    zh: zhLocale,
    cn: zhLocale,
    en: enLocale,
    us: enLocale,
    
}

const localLang = navigator.language.split('-')[0];
const storageLang = window.localStorage.getItem('locale')?.split('"')[1].split('"')[0].toLocaleLowerCase() || 'en';
const c = (storageLang.toLocaleLowerCase() !== 'zh' && storageLang.toLocaleLowerCase() !== 'en') ? 'en' : storageLang;

const i18n = createI18n({
    globalInjection: true, //全局生效$t
    locale: c || localLang || 'en',
    messages,
    legacy: false,
})

const app = createApp(App)
app.use(i18n)

上図の 2 つの言語パックの index.ts の内容は、言語のニーズに応じて記述されています。

export default {
    nNation: 'Country/Region',
    pleaseInput: 'Account',

}

4. ts でグローバル メソッド $t を使用する

import { getCurrentInstance } from "vue";
const { appContext : { config: { globalProperties } } } = getCurrentInstance();  // 这里可以根据需要写个hook
console.log(globalProperties.$t('pleaseSelectNation'))

html で使用する方がより一般的です。

<span>{
   
   { $t("nation") }}</span>

実際、この記事は globalProperties の使用を記録する初心者です。参考になれば幸いです。