日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
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") }}
  
  
  
  

問題來了，如果不在組件模板里怎么辦?比如一些工具函數(shù)，請求攔截器等跟視圖無關(guān)的JS代碼中如何使用呢?插件的使用場景是在組件內(nèi)部，也就是能訪問到組件實例的地方。對于其他地方的使用方法，官方文檔里貌似沒有提供直接的 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 插件

隨著項目規(guī)模的擴大，文本標(biāo)簽會越來越多，手動維護非常麻煩。同時，模板里用"a.b.c"這樣的屬性字符串來引用文本，在源碼層面非常不易閱讀。這些問題，都應(yīng)該由工具來解決。之前想過自己開發(fā)一個 VS Code 插件來解決這些問題，沒想到早就有人做好了。開源社區(qū)就是這么強大，你能想到的，早就有人做了。這個插件就叫 Vue i18n。

Vue i18n

早期版本不怎么好用，本人還提過 PR 修過缺陷?，F(xiàn)在比較完善了，功能齊全，操作便捷。可以選中文本一鍵生成中英文，鍵名默認是組件路徑加隨機串，省去了命名的煩惱。還能在編輯器里直接看到對應(yīng)的中文，鼠標(biāo)懸浮顯示英文?？傊容^方便，推薦使用。

前面介紹了vue-i18n在 Vue 組件外部使用的方法，但是對于這個 VS Code 插件有點小問題要解決。插件是根據(jù)源碼的字符串來匹配，然后在編輯器顯示出對應(yīng)的文本。因此，源碼里一定要有 $t('xxx')字樣才行。

改成這樣就能顯示出來了：

看起來沒問題，但實際上運行會報錯：

運行時異常

這是為什么呢?點擊錯誤信息的調(diào)用棧進去看源碼，發(fā)現(xiàn)原來i18n.tc這個方法是綁定到this(運行時指向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ū)脒@個方法就行了。

本文轉(zhuǎn)載自微信公眾號「1024譯站」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系1024譯站公眾號。