实现elementUI多语言切换

根据自己的需要加载表情包，不需要在页面上手动切换

// 在main.js中引入并设置

// import locale from "element-ui/lib/locale/lang/zh-CN";
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale, size: 'small' })

使用 i18n 手动切换语言

• 安装相关依赖
  npm install vue vue-i18n --save - 注意两者版本匹配问题，不然安装报错

• 在 src 目录下创建 lang 文件夹（包含不同的语言包：zh.js\en.js…\index.js）。各个文件的内容如下：

  //zh.js
  export default {
    item: {
      username: '用户名',
      password: '密码',
      email: '邮箱',
    },
  }
  

  //en.js
  export default {
    item: {
      username: 'Username',
      password: 'Password',
      email: 'Email',
    },
  }
  

  //index.js
  import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  import elementEnLocale from 'element-ui/lib/locale/lang/en'
  import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
  import elementLocal from 'element-ui/lib/locale'
  
  import enLocale from './en'
  import zhLocale from './zh'
  
  Vue.use(VueI18n)
  
  const messages = {
    en: {
      ...enLocale,
      ...elementEnLocale,
    },
    zh: {
      ...zhLocale,
      ...elementZhLocale,
    },
  }
  
  const i18n = new VueI18n({
    locale: localStorage.getItem('language') || 'zh',
    messages,
  })
  elementLocal.i18n((key, value) => i18n.t(key, value))
  
  export default i18n
  

  • 在 src/store 中设置 language 的相关信息

  //src/store/index.js
  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      language: localStorage.getItem('language') || 'zh',
    },
  
    mutations: {
      SET_LANGUAGE: (state, language) => {
        state.language = language
        localStorage.setItem('language', language)
      },
    },
  
    actions: {
      setLanguage({ commit }, language) {
        commit('SET_LANGUAGE', language)
      },
    },
  
    getters: {
      language: (state) => {
        return state.language
      },
    },
  })
  

  • 在页面中应用完成语言的切换

  <template>
    <div>
      <el-dropdown trigger="click" @command="handleSetLanguage">
        <div>选择语言</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>
  
      <div>
        <p>用户：{{ $t('item.username') }}</p>
        <p>密码：{{ $t('item.password') }}</p>
        <p>邮箱：{{ $t('item.email') }}</p>
      </div>
    </div>
  </template>
  <script>
    export default {
      name: 'Lang',
      data() {
        return {
          dateTime: '',
        }
      },
      computed: {
        language() {
          return this.$store.getters.language
        },
      },
      methods: {
        handleSetLanguage(lang) {
          this.$i18n.locale = lang
          this.$store.dispatch('setLanguage', lang)
        },
      },
    }
  </script>