Vue使用vue-i18n实现国际化

1. 简单使用

1. 安装依赖

   $ npm install vue-i18n
   

2. src下创建lang文件夹以及文件夹下zh.js,en.js和index.js文件

   • zh.js

     export default {
       message: '好好学习 天天向上'
     };
     

   • en.js

     export default {
       message: 'Good good study,Day day up'
     };
     

   • index.js

     import Vue from 'vue';
     import VueI18n from 'vue-i18n';
     import zh from './zh';
     import en from './en';
     
     Vue.use(VueI18n);
     
     const messages = {
       zh,
       en
     };
     
     const i18n = new VueI18n({
       locale: '',   //设置当前所使用的语言  zh or en
       messages
     });
     
     export default i18n;
     
     

3. main.js中导入/lang/index.js

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';
   import store from './store';
   import i18n from './lang';
   
   Vue.config.productionTip = false;
   
   new Vue({
     router,
     store,
     i18n,
     render: h => h(App)
   }).$mount('#app');
   

4. 使用

   $t('message')
   

2. 结合element-ui i18n使用

1. 添加element-ui依赖

$ vue add element-ui     // 记得要引入i18n相关模块

2. 在lang/index.js中，添加element-ui内置lang

import elementEnLocale from 'element-ui/lib/locale/lang/en'; // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN';// element-ui lang

//省略其他代码

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
};

//省略其他代码

3. 在main.js中，对element-ui组件初始化

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
});

3. 在项目中封装

1. vuex中添加对lang的设置

   • index.js

     const state = {
       language: '',
     };
     
     const getters = {
         language: state => state.language,
     }
     
     const mutations = {
       SET_LANGUAGE: (state, language) => {
         state.language = language;
       },
     }
     
     const actions = {
       setLanguage({ commit }, language) {
         commit('SET_LANGUAGE', language);
       },
     };
     
     export default {
       namespaced: true,
       state,
       mutations,
       actions
     };
     
     

2. lang/index.js中添加getLanguage()方法，处理messages中locale的值

export function getLanguage() {
  
   //获取设置的language
  const chooseLanguage = store.getters.language;
  if (chooseLanguage) {
    return chooseLanguage;
  }
  
  //如果没有设置language 读取本地的language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase();
  const locales = Object.keys(messages);
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale;
    }
  }
  return 'en';
}

3. 在vue中封装组件langSelect进行使用

   <template>
     <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
       <div>
         <svg-icon class-name="international-icon" icon-class="language" />
       </div>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item :disabled="language==='zh'" command="zh">
           中文
         </el-dropdown-item>
         <el-dropdown-item :disabled="language==='en'" command="en">
           English
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </template>
   
   <script>
   export default {
     computed: {
       language() {
         return this.$store.getters.language;
       }
     },
     methods: {
       handleSetLanguage(lang) {
         this.$i18n.locale = lang;
         this.$store.dispatch('setLanguage', lang);
       }
     }
   };
   </script>