快捷導(dǎo)航

關(guān)于vue-i18n在單文件js中的使用

更新時(shí)間：2022年09月08日 11:57:55 作者：艾歡歡

這篇文章主要介紹了關(guān)于vue-i18n在單文件js中的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-i18n在單文件js中使用

示例

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.getItem('userLanguage') : 'zh', 
  messages: {
    'zh': require('../assets/i18n/zh'),  // 中文語言包
    'en': require('../assets/i18n/en')   // 英文語言包
  }
})
export default {
  // ...
  tipMsg: {
    // 使用
    phone: i18n.t('TipPhoneFormatError'), 
    password: i18n.t('Password'),
  }
};

i18n如何在js文件中生效

在vue項(xiàng)目中引用vue-i18n實(shí)現(xiàn)語言切換功能，開發(fā)過程中發(fā)現(xiàn)，在vue文件中使用都可以，但是在js文件中直接使用$t('zhKey.首頁')是不生效的。

下面是我研究出的解決方法

// js文件中
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from 'unisoc-ui/js/i18n/langs'
Vue.use(VueI18n) // 這里一行是必須加的。
// 在該js文件中，單獨(dú)注冊(cè)一個(gè)i18n實(shí)例并引入語言文件
const i18n = new VueI18n({
  locale: localStorage.lang || 'Zh_CN',
  messages: messages
})
let mainNavlist = [] 
mainNavlist = [
  {
    icon: 'iconuser',
    title: i18n.t('zhKey.首頁'),
    url: '/'
  }
]

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+js實(shí)現(xiàn)微信上傳圖片選擇功能
這篇文章主要為大家詳細(xì)介紹了vue+js實(shí)現(xiàn)微信上傳圖片選擇功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
uniapp中easycom用法實(shí)例詳解
easycom是Uniapp框架中非常方便的組件自動(dòng)注冊(cè)機(jī)制，可以大大簡(jiǎn)化組件的使用和管理，這篇文章主要介紹了uniapp中easycom用法詳解,需要的朋友可以參考下
2023-03-03
vue3:setup的兩個(gè)注意點(diǎn)詳解
這篇文章主要介紹了vue3.0中setup的兩個(gè)注意點(diǎn)，本文通過兩種用法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-10-10
vue卡片式點(diǎn)擊切換圖片組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue卡片式點(diǎn)擊切換圖片組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue3中虛擬dom的介紹與使用詳解
Vue?是如何將一份模板轉(zhuǎn)換為真實(shí)的?DOM?節(jié)點(diǎn)的,又是如何高效地更新這些節(jié)點(diǎn)的呢,這些都離不開虛擬dom這個(gè)概念,下面我們就來了解下虛擬dom這個(gè)概念以及它是什么吧
2024-01-01
vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法
今天小編就為大家分享一篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式
這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue實(shí)現(xiàn)多級(jí)菜單效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
關(guān)于vue-admin-element中的動(dòng)態(tài)加載路由
這篇文章主要介紹了關(guān)于vue-admin-element的動(dòng)態(tài)加載路由，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08