vue多语言i18n

1、安装i18n插件，配合使用饿了么UI框架 http://element-cn.eleme.io/#/zh-CN/

npm install vue-i18n -S
npm install element-ui -S

饿了么UI的组件语言也会一同更改，如图（英文状态）：

2、在src目录下，创建多语言目录i18n

langs目录下为语言配置文件，languages目录下为语言json文件, i18n.js为配置文件

3、在main.js里面添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import i18n from './i18n/i18n';

Vue.use(ElementUI);
new Vue({
  el: '#app',
  router,
  i18n,  //在此添加i18n组件
  components: { App },
  template: '<App/>'
});

4、i18n目录下，i18n.js

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n);
//从localStorage中拿到用户的语言选择，如果没有，那默认英文。
const i18n = new VueI18n({
  locale: localStorage.lang || 'en',
  messages
});
locale.i18n((key, value) => i18n.t(key, value)); //为了实现element插件的多语言切换

export default i18n

5、i18n/langs/index.js

import en from './en';
import cn from './cn';
export default {
  en: en,
  cn: cn
}

6、i18n/langs/cn.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = require('../languages/cn.json');
cn.el = zhLocale.el;
export default cn;

i18n/langs/en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = require('../languages/en');
en.el = enLocale.el;
export default en;

7、languages中的json文件，按照json格式填写。例如：

{
  "login": {
    "language": {
      "en": "英语",
      "cn": "汉语"
    },
    "loginOut": "退出"
  }
}

8、vue页面使用

<div>{{ $t("login.loginOut") }}</div>

9、点击切换语言

methods: {
    switchLang(lang)  {
      this.$i18n.locale = lang;
      handleLocalStorage('set','lang',lang); //handleLocalStorage为操作localstorage的函数
    }
}

10、handleLocalStorage函数（友情赠送）

/**
 * 对LocalStorage 进行 存， 取， 移除 操作
 * method: 'get' , 'set' , 'remove'
 */
export function handleLocalStorage(method, key, value) {
  switch (method) {
    case 'get' : {
      let temp = window.localStorage.getItem(key);
      if (temp) {
        return temp
      } else {
        return false
      }
    }
    case 'set' : {
      window.localStorage.setItem(key, value);
      break
    }
    case 'remove': {
      window.localStorage.removeItem(key);
      break
    }
    default : {
      return false
    }
  }
}

猜你喜欢