tsl-locale

国际化

国际化基于Vue I18n实现，详情配置请参照https://kazupon.github.io/vue-i18n/zh/

这里将列举常用配置

• 本组件默认已开启延迟加载翻译（一次加载所有翻译文件是过度和不必要的）

• 安装:

  yarn add tsl-locale

• 初始化:

  import Vue from 'vue'
  import App from './App.vue'
  import tslI18n from "tsl-locale";
  new Vue({
      render: h => h(App),
      i18n: tslI18n("zh") //'zh'为默认语言包名称,会加载/src/assets/lang下的zh.json文件
  }).$mount('#app')

• 使用:

  //一下两种方式效果一样，建议优先使用 v-t 命令模式
  <h1>{{ $t("hello.title") }}</h1>
  <h1 v-t="'hello.title'"></h1>

• 在script中使用

  console.log(this.$i18n.tc("hello.title"));
  //由于语言包全部为异步加载,目前未提供加载完成钩子，this.$i18n.tc尽量不在created生命周期中调用

• 语言环境获取与变更:

  this.setLang('zh');
  console.log(this.getLang());

• 需要在语言包目录路径: src/assets/lang添加所支持的语言包文件，格式例如zh.json

  {
    "sidebar": {
      "/": "首页",
      "/blank": "空白页",
      "listName": "列表合集"
    },
    "hello": {
      "title": "你好，特斯联！",
      "changeBtn": "变更语言"
    }
  }

• 加载网络资源（语言包）,动态加载

  //初始化网络语言包
  new Vue({
    render: (h) => h(App),
    i18n: tslI18n({
      name: 'cn',
      url: 'http://qtea17lxj.hn-bkt.clouddn.com/en.json'
    }),
    router: tslRouter(routers),
  }).$mount("#app");
  
  //设置网络语言包
  this.setLang('cn', 'http://qtea17lxj.hn-bkt.clouddn.com/en.json');

• i8n官网其它配置，如日期格式化，数字本地化，如下初始化:

  import tslI18n from "tsl-locale";
  new Vue({
    render: h => h(App),
    i18n: tslI18n("zh", {
        dateTimeFormats,
        numberFormats
    }),
  }).$mount("#app");