建站
咨詢
售后
建站咨詢
新聞中心
在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)部，也就是能訪問(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ò)缺陷。現(xiàn)在比較完善了，功能齊全，操作便捷。可以選中文本一鍵生成中英文，鍵名默認(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è)方法就行了。
本文轉(zhuǎn)載自微信公眾號(hào)「1024譯站」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系1024譯站公眾號(hào)。
當(dāng)前名稱：Vue-i18n在JS文件中如何使用
文章出自：http://www.dlmjj.cn/article/dhsgdhs.html
