這篇文章主要介紹“Vue-i18n 在 JS 文件中的使用方法”，在日常操作中，相信很多人在Vue-i18n 在 JS 文件中的使用方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue-i18n 在 JS 文件中的使用方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
目前創(chuàng)新互聯(lián)公司已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、三沙網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
在Vue.js項(xiàng)目中，vue-i18n是一個(gè)比較流行的多語(yǔ)言方案。常規(guī)用法是在項(xiàng)目入口文件里，將它作為插件引入，然后在 .vue文件或者組件模板里按照 API 來(lái)調(diào)用就行。插件會(huì)自動(dòng)往組件實(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 {{ $t("message.hello") }}
問(wèn)題來(lái)了，如果不在組件模板里怎么辦?比如一些工具函數(shù)，請(qǐng)求攔截器等跟視圖無(wú)關(guān)的JS代碼中如何使用呢?插件的使用場(chǎng)景是在組件內(nèi)部，也就是能訪(fǎng)問(wèn)到組件實(shí)例的地方。對(duì)于其他地方的使用方法，官方文檔里貌似沒(méi)有提供直接的 API。摸索了一段時(shí)間終于解決，在此記錄下。
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)簽會(huì)越來(lái)越多，手動(dòng)維護(hù)非常麻煩。同時(shí)，模板里用"a.b.c"這樣的屬性字符串來(lái)引用文本，在源碼層面非常不易閱讀。這些問(wèn)題，都應(yīng)該由工具來(lái)解決。之前想過(guò)自己開(kāi)發(fā)一個(gè) VS Code 插件來(lái)解決這些問(wèn)題，沒(méi)想到早就有人做好了。開(kāi)源社區(qū)就是這么強(qiáng)大，你能想到的，早就有人做了。這個(gè)插件就叫 Vue i18n。
Vue i18n
早期版本不怎么好用，本人還提過(guò) PR 修過(guò)缺陷?，F(xiàn)在比較完善了，功能齊全，操作便捷?？梢赃x中文本一鍵生成中英文，鍵名默認(rèn)是組件路徑加隨機(jī)串，省去了命名的煩惱。還能在編輯器里直接看到對(duì)應(yīng)的中文，鼠標(biāo)懸浮顯示英文?？傊容^方便，推薦使用。
前面介紹了vue-i18n在 Vue 組件外部使用的方法，但是對(duì)于這個(gè) VS Code 插件有點(diǎn)小問(wèn)題要解決。插件是根據(jù)源碼的字符串來(lái)匹配，然后在編輯器顯示出對(duì)應(yīng)的文本。因此，源碼里一定要有 $t('xxx')字樣才行。
改成這樣就能顯示出來(lái)了：
看起來(lái)沒(méi)問(wèn)題，但實(shí)際上運(yùn)行會(huì)報(bào)錯(cuò)：
運(yùn)行時(shí)異常
這是為什么呢?點(diǎn)擊錯(cuò)誤信息的調(diào)用棧進(jìn)去看源碼，發(fā)現(xiàn)原來(lái)i18n.tc這個(gè)方法是綁定到this(運(yùn)行時(shí)指向VueI18n對(duì)象)上去執(zhí)行的，而這里的代碼執(zhí)行的時(shí)候并沒(méi)有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 )) };所以，這里不能直接拿來(lái)調(diào)用，需要改變執(zhí)行上下文。重新封裝下這個(gè)方法：
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); }使用的時(shí)候?qū)脒@個(gè)方法就行了。
到此，關(guān)于“Vue-i18n 在 JS 文件中的使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
