循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理

// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })

export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage
  // 如果没有选择语言，那么使用浏览器语言
  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'
}

const locales = Object.keys(messages)

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
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
import enLocale from './en'
import zhLocale from './zh'
Vue.use(VueI18n)
// 定义对应语言键，展开对应的键值对应表
const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  locale: getLanguage(),
  messages
})
export default i18n

Vue.use(ElementUI, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value) })
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

<el-form ref="loginForm" :model="loginForm" :rules="rules" class="loginForm">
          <el-form-item prop="username" class="login-item">
            <el-input
              v-model="loginForm.username"
              class="area"
              type="text"
              :placeholder="$t('login.username')"
              prefix-icon="el-icon-user-solid"
              @keyup.enter.native="submitForm('loginForm')"
            />
          </el-form-item>
          <el-form-item prop="password" class="login-item">
            <el-input
              v-model="loginForm.password"
              class="area"
              type="password"
              :placeholder="$t('login.password')"
              prefix-icon="el-icon-lock"
              @keyup.enter.native="submitForm('loginForm')"
            />
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" class="submit_btn" @click="submitForm('loginForm')">{{ $t('login.logIn') }}</el-button>
          </el-form-item>
          <div class="tiparea">
            <span style="margin-right:20px;">{{ $t('login.username') }} : admin</span>
            <span> {{ $t('login.password') }} : {{ $t('login.any') }}</span>
          </div>
        </el-form>

<template v-if="device!=='mobile'">
    <search id="header-search" class="right-menu-item" />
    <error-log class="errLog-container right-menu-item hover-effect" />
    <el-tooltip :content="$t('navbar.fullscreen')" effect="dark" placement="bottom">
      <screenfull id="screenfull" class="right-menu-item hover-effect" />
    </el-tooltip>
    <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
      <size-select id="size-select" class="right-menu-item hover-effect" />
    </el-tooltip>
    <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
      <lang-select class="right-menu-item hover-effect" />
    </el-tooltip>
  </template>