vue-i18n国际化多语言

某些项目需要国际化，点击按钮切换中文/英文，包括两个方面。一是所使用组件库方面的语言包引入，二是自己页面的国际化，同时将当前 lang 语言存在 sessionStroage之中，为了下次打开页面能记住上次的语言设置。

国际化

• 安装vue-i18n

vue install vue-i18n --save

• 注入 vue 实例中，项目中实现调用 api 和 模板语法

import VueI18n from 'vue-i18n'
// 包含语言包的/src/i18n中一个文件
import messages from 'src/i18n'
// 注册:
Vue.use(VueI18n) ;

const i18n = new VueI18n({
    locale: 'zh',    // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
    fallbackLocale: 'zh',
    messages
})

new Vue({
  el: '#app',
  i18n,  // 最后
  router,
  template: '<App/>',
  components: { App }
})

引入我们写好的中英文配置文件,index.js负责将内容暴露出来。

//index.js
import en from './config/en'
import zh from './config/zh'


// 引入语言配置文件
export default {
  zh, //中文
  en, //英文
}

//zh.js中文语言包：

export default {
  homeOverview:'首页概览',
  ....
}

• 页面渲染

vue模板：

//语法 {{$t(xx.xx)}}
<q-tab name="login" :label="$t('login.title1')" />
<span>{{$t('lang .homeOverview')}}</span>

js内：

//语法： this.$t('xx.xx')
this.options = [
  {
    value: '1',
    label: this.$t('i18nView.one')
  },
  {
    value: '2',
    label: this.$t('i18nView.two')
  },
  {
    value: '3',
    label: this.$t('i18nView.three')
  }
]

注意： 这种情况下，国际化只会执行一次，因为在 js 中的this.options只会在初始化的时候执行一次，它的数据并不会随着你本地 lang的变化而变化，所以需要你在lang变化的时候手动重设this.options.

• 页面内切换

//使用缓存记录 
watch: {
    /**
     * 国际化切换
     * 组件国际化切换
     */
    lang(newv, oldv) {
      this.$i18n.locale = newv.value;
      window.sessionStorage.setItem("lang", JSON.stringify(newv));
      // quasar组件中英文
      let lang;
      if (newv.value == "zh") {
        lang = "zh-hans";
      }
      if (newv.value == "en") {
        lang = "en-us";
      }
      // 这里用到了quasar的组件, 引入他们家的组件语言包
      import(`quasar/lang/${lang}`).then(res => {
        this.$q.lang.set(res.default);
      });
    }
}

解决中英文长度差别问题，有时候可能会导致页面上的错乱。 第一种方式：使用溢出显示省略号 第二种方式：切换为英文版本时使用另一个样式表，微调页面样式

css 样式微调

你本来的CSS是这样的

.title a { font-size:14px; }
切换成国际版的时候 可以给 body 加个 class="en"

css 就变成

.title a { font-size:14px; }
.en .title a { font-size:12px; }