【Vue】vue-i18n踩坑记录

1
VueI18n.prototype._t = function _t (key, _locale, messages, host) {
2
  var values = [], len = arguments.length - 4;
3
  while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ];
4

5
  if (!key) { return '' }
6

7
  var parsedArgs = parseArgs.apply(void 0, values);
8
  var locale = parsedArgs.locale || _locale;
9
  var ret = this._translate(
10
    messages, locale, this.fallbackLocale, key,
11
    host, 'string', parsedArgs.params
12
  );
13
  if (this._isFallbackRoot(ret)) {
14
    if ("development" !== 'production' && !this._silentTranslationWarn) {
15
      warn(("Fall back to translate the keypath '" + key + "' with root locale."));
16
    }
17
    /* istanbul ignore if */
18
    if (!this._root) { throw Error('unexpected error') }
19
    return (ref = this._root).t.apply(ref, [ key ].concat( values ))
20
  } else {
21
    return this._warnDefault(locale, key, ret, host)
22
  }
23
  var ref;
24
};

1
Vue.prototype.$t = function (key) {
2
  var values = [], len = arguments.length - 1;
3
  while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];
4

5
  var i18n = this.$i18n;
6
  return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))
7
};

1
import Vue from 'vue';
2
import VueI18n from 'vue-i18n';
3
import App from './index';
4
// import router from '../../router/edrPage';
5
import store from '../../store/index';
6
import router from '../../router/edrPage/index';
7
// 依赖包
8
import iView from 'iview';
9
import en from 'locale/local/en_US';
10
import zh from 'locale/local/zh_CN';
11
import zhLocale from 'locale/iviewLocale/zh-CN';
12
import enLocale from 'locale/iviewLocale/en-US';
13
import 'iview/dist/styles/iview.css';
14
Vue.config.productionTip = false;
15
Vue.config.lang = 'en';  // 语言控制的开关
16
Vue.use(VueI18n);        // Vue实例中注册
17
// 定义数据
18
const messages = {
19
    en: Object.assign({}, en, enLocale),  // 这里浅拷贝也可
20
    zh: Object.assign({}, zh, zhLocale)
21
}
22
// 新生成i18n实例，并写入相应配置
23
const i18n = new VueI18n({
24
    locale: Vue.config.lang, // 语言
25
    fallbackLocale: 'en',    // 这是iView用到的
26
    messages                 // 把上面定义好的数据传入i18n
27
})
28
// 注册iView的同时，把i18n的配置一同传入
29
// 这样就可以在vue中无缝使用i18n和iView的国际化组件了, element同理
30
Vue.use(iView, {
31
    i18n(path, options) {
32
      let value = i18n.t(path, options);
33
      if (value !== null && value !== undefined) return value;
34

35
      return '';
36
    }
37
});
38
/* eslint-disable no-new */
39
new Vue({
40
  el: '#app',
41
  // i18n已有上面定义的messages了，这里在Vue实例中注入
42
  // 就可以在组件中 this.$i18n 这样来用了(这一步是i18n已帮我们做的)
43
  i18n,
44
  router,
45
  store,
46
  template: '<App/>',
47
  components: { App }
48
});

1
<template>
2
  <div id="login" class="bg">
3
    <button @click="switchLang">切换语言</button>
4
    <h1>{{$t('edr.footer.copyright')}}</h1>
5
  </div>
6
</template>
7

8
<script>
9
  export default {
10
    name: 'page-login',
11
    data() {
12
      return {
13
        locale: 'en',
14
      }
15
    },
16
    mounted() {
17
      this.locale = this.$i18n.locale = localStorage.getItem('language') // 从 localStorage 中获取语言状态
18
    },
19
    methods: {
20
      switchLang() {
21
        if (this.locale === 'en') {
22
          this.locale = this.$i18n.locale = 'zh'
23
          localStorage.setItem('language', 'zh')
24
        } else {
25
          this.locale = this.$i18n.locale = 'en'
26
          localStorage.setItem('language', 'en')
27
        }
28
      }
29
    }
30
  }
31
</script>