您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue-i18n 在 JS 文件中的使用方法”,在日常操作中,相信很多人在Vue-i18n 在 JS 文件中的使用方法問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vue-i18n 在 JS 文件中的使用方法”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
在Vue.js項(xiàng)目中,vue-i18n是一個比較流行的多語言方案。常規(guī)用法是在項(xiàng)目入口文件里,將它作為插件引入,然后在 .vue文件或者組件模板里按照 API 來調(diào)用就行。插件會自動往組件實(shí)例中注入$t方法。
const messages = { en: { message: { hello: 'hello world' } }, cn: { message: { hello: '你好世界' } } } // Create VueI18n instance with options const i18n = new VueI18n({ locale: 'cn', // set locale messages, // set locale messages }) new Vue({ i18n }).$mount('#app') //App.vue <div id="app"> <p>{{ $t("message.hello") }}</p> </div>
問題來了,如果不在組件模板里怎么辦?比如一些工具函數(shù),請求攔截器等跟視圖無關(guān)的JS代碼中如何使用呢?插件的使用場景是在組件內(nèi)部,也就是能訪問到組件實(shí)例的地方。對于其他地方的使用方法,官方文檔里貌似沒有提供直接的 API。摸索了一段時間終于解決,在此記錄下。
import VueI18n from 'vue-i18n'; const messages = { en: { message: { hello: 'hello world' } }, cn: { message: { hello: '你好世界' } } } const i18n = new VueI18n({ locale: 'cn', // set locale messages: messages , // set locale messages }); console.log(i18n.tc('message.hello')) // 你好世界
搭配 VS Code 插件
隨著項(xiàng)目規(guī)模的擴(kuò)大,文本標(biāo)簽會越來越多,手動維護(hù)非常麻煩。同時,模板里用"a.b.c"這樣的屬性字符串來引用文本,在源碼層面非常不易閱讀。這些問題,都應(yīng)該由工具來解決。之前想過自己開發(fā)一個 VS Code 插件來解決這些問題,沒想到早就有人做好了。開源社區(qū)就是這么強(qiáng)大,你能想到的,早就有人做了。這個插件就叫 Vue i18n。
Vue i18n
早期版本不怎么好用,本人還提過 PR 修過缺陷?,F(xiàn)在比較完善了,功能齊全,操作便捷。可以選中文本一鍵生成中英文,鍵名默認(rèn)是組件路徑加隨機(jī)串,省去了命名的煩惱。還能在編輯器里直接看到對應(yīng)的中文,鼠標(biāo)懸浮顯示英文??傊容^方便,推薦使用。
前面介紹了vue-i18n在 Vue 組件外部使用的方法,但是對于這個 VS Code 插件有點(diǎn)小問題要解決。插件是根據(jù)源碼的字符串來匹配,然后在編輯器顯示出對應(yīng)的文本。因此,源碼里一定要有 $t('xxx')字樣才行。
改成這樣就能顯示出來了:
看起來沒問題,但實(shí)際上運(yùn)行會報錯:
運(yùn)行時異常
這是為什么呢?點(diǎn)擊錯誤信息的調(diào)用棧進(jìn)去看源碼,發(fā)現(xiàn)原來i18n.tc這個方法是綁定到this(運(yùn)行時指向VueI18n對象)上去執(zhí)行的,而這里的代碼執(zhí)行的時候并沒有this,所以是undefined。
VueI18n.prototype.tc = function tc (key, choice) { var ref; var values = [], len = arguments.length - 2; while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ]; return (ref = this)._tc.apply(ref, [ key, this.locale, this._getMessages(), null, choice ].concat( values )) };
所以,這里不能直接拿來調(diào)用,需要改變執(zhí)行上下文。重新封裝下這個方法:
import Vue from 'vue'; import VueI18n from 'vue-i18n'; import i18nLabels from '@/i18n'; Vue.use(VueI18n); export const i18n = new VueI18n({ locale: 'zh', // set locale messages: i18nLabels, // set locale messages }); // 重新封裝方法 export function $t(args) { return i18n.tc.call(i18n, args); }
使用的時候?qū)脒@個方法就行了。
到此,關(guān)于“Vue-i18n 在 JS 文件中的使用方法”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。