vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)

更新時間：2022年12月02日 14:59:15 作者：一只愛吃糖的小羊

所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字（message）都有一個統(tǒng)一的標識符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下

vue項目里多語言工具一直用的vue-i18n。

以前用的 vue2，也沒啥大問題，就是配置好之后用t(“你的屬性名”)就行，現(xiàn)在用vue3其實本來也沒太大變化。

但是配置完之后，在html中用$t()沒有問題，顯示文案什么的一切正常。而在ts中使用$t()方法報錯，后來才發(fā)現(xiàn)是我沒有設置全局的$t()方法。

記錄一下在vue3中使用vue-i18n的方法：

安裝vue-18n
配置
應用
掛載全局方法$t以方便在ts中使用（本次記錄的重點）

由于1.2.3.好多人寫過了，我就簡單的寫一下，本次記錄的重點是4，因為我發(fā)現(xiàn)網(wǎng)上好多博客都只寫了$t在html中的使用，但是大都沒提到在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)

上圖中兩個語言包的index.ts中的內(nèi)容自己根據(jù)語言需要寫：

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

}

在ts中使用全局方法$t

import { getCurrentInstance } from "vue";
const { appContext : { config: { globalProperties } } } = getCurrentInstance();  // 這里可以根據(jù)需要寫個hook
console.log(globalProperties.$t('pleaseSelectNation'))

在html中的使用就比較正常了：