vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
vue項(xiàng)目里多語(yǔ)言工具一直用的vue-i18n。
以前用的 vue2，也沒啥大問題，就是配置好之后用t(“你的屬性名”)就行，現(xiàn)在用vue3其實(shí)本來(lái)也沒太大變化。
但是配置完之后，在html中用$t()沒有問題，顯示文案什么的一切正常。而在ts中使用$t()方法報(bào)錯(cuò)，后來(lái)才發(fā)現(xiàn)是我沒有設(shè)置全局的$t()方法。
記錄一下在vue3中使用vue-i18n的方法：
- 安裝vue-18n
- 配置
- 應(yīng)用
- 掛載全局方法$t以方便在ts中使用（本次記錄的重點(diǎn)）
由于1.2.3.好多人寫過(guò)了，我就簡(jiǎn)單的寫一下，本次記錄的重點(diǎn)是4，因?yàn)槲野l(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)
上圖中兩個(gè)語(yǔ)言包的index.ts中的內(nèi)容自己根據(jù)語(yǔ)言需要寫：
export default {
nNation: 'Country/Region',
pleaseInput: 'Account',
}
在ts中使用全局方法$t
import { getCurrentInstance } from "vue";
const { appContext : { config: { globalProperties } } } = getCurrentInstance(); // 這里可以根據(jù)需要寫個(gè)hook
console.log(globalProperties.$t('pleaseSelectNation'))
在html中的使用就比較正常了：
<span>{{ $t("nation") }}</span>
其實(shí)本文算是新手記錄一下對(duì)于globalProperties的使用，希望對(duì)您有所幫助。
總結(jié)
到此這篇關(guān)于vue3使用vue-i18n(ts中使用$t, vue3不用this)的文章就介紹到這了,更多相關(guān)vue3使用vue-i18n內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vant的基礎(chǔ)上實(shí)現(xiàn)添加表單驗(yàn)證框架的方法示例
這篇文章主要介紹了在Vant的基礎(chǔ)上實(shí)現(xiàn)添加驗(yàn)證框架的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
使用vue-markdown實(shí)現(xiàn)markdown文件預(yù)覽
Vue-Markdown 是一個(gè)輕量級(jí)且高效的庫(kù),用于在Vue.js應(yīng)用程序中渲染Markdown文本,下面我們來(lái)看看如何使用vue-markdown實(shí)現(xiàn)markdown文件預(yù)覽效果吧2025-04-04
從Element日期組件源碼中學(xué)到的兩個(gè)工具方法技巧
這篇文章主要介紹了從Element日期組件源碼中學(xué)到的兩個(gè)工具方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue設(shè)置頁(yè)面超時(shí)15分鐘自動(dòng)退出登錄的方法詳解
當(dāng)用戶登錄后,如果長(zhǎng)時(shí)間未操作頁(yè)面這個(gè)時(shí)候需要自動(dòng)退出登錄回到登錄頁(yè)面,本文將給大家介紹一下vue設(shè)置頁(yè)面超時(shí)15分鐘自動(dòng)退出登錄的方法,感興趣的同學(xué)可以自己動(dòng)手試一下2023-10-10
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件全過(guò)程(WEB)
寫頁(yè)面的時(shí)候都會(huì)用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁(yè)碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預(yù)覽pdf 控制頁(yè)碼顯示范圍不生效問題的問題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-01-01
這篇文章主要介紹了淺談Vue 性能優(yōu)化之深挖數(shù)組，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了vue2中如何使用swiper@5.4.5問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了iview實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06