i18n国际化$t用法

一、安装及引入i18n

1、安装 vue-i18n依赖包；使用NPM进行安装或者CNPM进行安装。

npm install vue-i18n --save-dev

2、此处以vue项目举例，将i18n引入vue实例，首在在main.js中引入 vue-i18n。

这里对i18n进行了一个封装

i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
//导入iview自带语言包
import zh from 'view-design/dist/locale/zh-CN';
import en from 'view-design/dist/locale/en-US';
import appZh from './lang/zh.json';
import appEn from './lang/en.json';
Vue.use(VueI18n);
// 将本地语言包与iview语言包合并
const messages = {
  en_US: Object.assign(appEn, en),
  zh_CN: Object.assign(appZh, zh),
};
// 获取本机系统语言
const navLang = navigator.language;
const localLang = (navLang === 'zh_CN' || navLang === 'en_US') ? navLang : false;
const lang = localLang || 'zh_CN';
Vue.config.lang = lang;
export default new VueI18n({
  locale: lang || 'en_US',
  // 当语言不存在时；使用默认的语言
  fallbackLocale: 'en_US',
  messages,
});

在 main.js 中引入i18n.js

main.js

import Vue from "vue";
import iView from "view-design";
import App from "./App.vue";
import router from "@/router";
import store from "@/store";
import i18n from './locales/i18n';
Vue.use(iView, { i18n: (key, value) => i18n.t(key, value) })
Vue.prototype.$t = (key, value) => i18n.t(key, value)
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

这里创建一个 $t 实例对象，方便全局调用

二、国际化的使用

1、template中变量的用法

<FormItem :label="$t('test')"></FormItem>

2、template中{{}}的用法

<span>{{$t('test')}}</span>

3、局部filter中的用法 (解决this指向问题)

<span>{{item | itemFilter(getKey)}}</span>

filters: {
  itemFilter(status, getKey) {
    switch (status) {
    case 0:
      return getKey('start');
    case 1:
      return getKey('end');
    default:
      return '';
    }
  },
},

methods: {
  getKey(arg) {
    const hasKey = this.$t(arg);
    if (hasKey) {
      const result = this.$t(arg);
      return result;
    }
    return arg;
  },
}，

4、全局filter中的用法

//引用i18
import i18n from '@/locales/i18n';
function testStatus(status) {
  if (status == 0) {
    return i18n.t('start');
  } if (status == 1) {
    return i18n.t('end');
  }
  return '--';
}
export {
  testStatus,
};

5、变量式的$t用法

zh.json

"total_person": "公司共计{msg1}人,其中高级前端工程师{msg2}人",

<span>
{{$t('total_person',{msg1:'1000',msg2:'60'})}}
</span>

此处可以传入变量msg1和msg2，方便翻译使用

页面展示结果是 公司共计1000人,其中高级前端工程师60人

以上是 i18n国际化$t用法 的全部内容， 来源链接： utcz.com/a/16372.html

回到顶部