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