Vue3中使用i18n,this.$t報(bào)錯(cuò)問(wèn)題及解決
更新時(shí)間：2024年04月25日 10:07:59 作者：死神蘿莉
這篇文章主要介紹了Vue3中使用i18n,this.$t報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue3使用i18n,this.$t報(bào)錯(cuò)
方案一
//需要把$t手動(dòng)掛載到全局
//main.js app.config.globalProperties.$t = i18n.global.t
//需要使用的時(shí)候在組件里引用
import { getCurrentInstance } from 'vue'
const _this = getCurrentInstance().appContext.config.globalProperties
console.log('$i18n',_this.$t('歡迎'))方案二
legacy設(shè)置為false
//main.js
const i18n = createI18n({
locale: localStorage.getItem('i18n-lang'),
fallbackLocale: 'zh',
messages: {
en,
zh
},
legacy: false
})//組件中先引用再使用
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log('$i18n',t("歡迎"))方案三
直接像vue2一樣，使用選項(xiàng)式寫(xiě)法，可以直接使用
//使用vue選項(xiàng)式寫(xiě)法，可以直接使用this.$t
<script>
export default {
methods:{
change(){
console.log(this.$t('歡迎'))
}
},
mounted() {
this.change()
}
}
</script>Vue3使用vue-i18n實(shí)現(xiàn)國(guó)際化
1、安裝 vue-i18n 依賴(lài)包
npm i vue-i18n
2、創(chuàng)建文件存儲(chǔ)翻譯的語(yǔ)言
在src/i18n/en.js中
export default {
login: 'login'
};在src/i18n/zh.js中
export default {
login: '登錄'
};3、注冊(cè)i18n實(shí)例
在src/i18n/index.js中
import { createI18n } from "vue-i18n";
// 本地語(yǔ)言包
import zhLocal from "./zh";
import enLocal from "./en";
//注冊(cè)i18n實(shí)例并引入語(yǔ)言文件
const i18n = createI18n({
legacy: false,
locale: 'zh',
fallbackLocale: "zh",
silentTranslationWarn: true,
messages: {
zh:{...zhLocal} ,
en:{...enLocal}
},
});
export default i18n;4、在main.js中引入i18實(shí)例
import i18n from "./i18n/index";
app.use(i18n).mount("#app");5、在組件中使用
在模板中
<div>{{ $t('login') }}</div>在js中
import { useI18n } from 'vue-i18n';
const { locale,t } = useI18n();
console.log(t('login')); // 登錄
// 切換語(yǔ)言
const changeLanguage = val => {
locale.value = val;
};總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了利用report分析vue項(xiàng)目中各文件大小問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
elementUI Table組件實(shí)現(xiàn)表頭吸頂效果(示例代碼)
文章介紹了如何在vue2.6+和elementUI環(huán)境下實(shí)現(xiàn)el-table組件的表頭吸頂效果,通過(guò)添加樣式、注冊(cè)指令、引入指令并在父元素中避免使用overflow:hidden,可以實(shí)現(xiàn)場(chǎng)景下表頭始終可見(jiàn),本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題
下面小編就為大家分享一篇解決Vue 通過(guò)下表修改數(shù)組,頁(yè)面不渲染的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue實(shí)現(xiàn)本地存儲(chǔ)添加刪除修改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)本地存儲(chǔ)添加刪除修改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue樹(shù)形結(jié)構(gòu)獲取鍵值的方法示例
這篇文章主要介紹了vue樹(shù)形結(jié)構(gòu)獲取鍵值的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
解決echarts圖表使用v-show控制圖表顯示不全的問(wèn)題
這篇文章主要介紹了解決echarts圖表使用v-show控制圖表顯示不全的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本文主要介紹了elementui下image組件的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue 折疊展示多行文本組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 折疊展示多行文本組件，自動(dòng)根據(jù)傳入的expand判斷是否需要折疊，非常完美，文章通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue2.0 datepicker的使用方法，非常不錯(cuò)，具有參考借鑒借鑒價(jià)值，需要的朋友參考下2018-02-02