vue element UI 使用 i18

1. 安装

npm install vue-i18n

2.在 src目录下面新建 i18文件 如下图所示。

2.1 index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 引入各个语言配置文件
import zh from './config/zh'
import en from './config/en'

import store from '@/store/index.js'
import * as localTool from '@/utils/localStorage'

import locale from 'element-ui/lib/locale'

// 创建vue-i18n实例i18n
const i18n = new VueI18n({
  // 设置默认语言
  locale: localTool.getLanguageSet() || store.state.dialect, // 语言标识
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    zh,
    en
  }
})

locale.i18n((key, value) => i18n.t(key, value))

// 暴露i18n
export default i18n

2.2 en.js

import enLocale from 'element-ui/lib/locale/lang/en'

const lang = {
  ...enLocale,
  project: {
    name: 'Database Audit',
    config: {
      language: 'language',
      zh: '中文',
      en: 'English',
      logOut: 'logOut'
    },
    fourHundredAndOne: {
      title: 'Unable to access the service',
      describe: 'You have successfully logged in, but this account does not have permission to access this page. You can contact the administrator for authorization, or',
      button: 'Switch to other account login'
    },
    fourHundredAndFour: {
      title: 'Page lost',
      describe: 'Please check whether the URL you entered is correct, or click the button below to return to the login page',
      button: 'return'
    }
  }
}

export default lang

2.3 zh.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

const lang = {
  ...zhLocale,
  project: {
    name: '数据库审计',
    config: {
      language: '语言',
      zh: '中文',
      en: 'English',
      logOut: '退出'
    },
    fourHundredAndOne: {
      title: '无法访问服务',
      describe: '您已登录成功，但此账号无权访问该页面。您可联系管理员授权，或',
      button: '切换其他账号登录'
    },
    fourHundredAndFour: {
      title: '页面走丢了',
      describe: '请检查您输入的网址是否正确，或单击下面的按钮返回登录页',
      button: '返回'
    }
  }
}

export default lang

3. main.js 导入

import i18n from './i18n/index'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  components: { App },
  template: '<App/>'
})

4. 在页面中使用效果

4.1 代码使用

<el-dropdown class="mrr10" trigger="hover" placement="bottom">
        <span class="el-dropdown-link">
          {{ $t('project.config.language') }}
        </span>
        <i class="el-icon-caret-bottom" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <span style="display: block;" @click="switchLanguage('zh')">{{ $t('project.config.zh') }}</span>
            </el-dropdown-item>
            <el-dropdown-item >
              <span style="display: block;" @click="switchLanguage('en')">{{ $t('project.config.en') }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>



     switchLanguage (language) {
      this.$store.dispatch('setDialect', language).then(() => {
        localTool.setLanguageSet(language)
        window.location.reload()
      })
    }

4.2 store封装

// 设置方言
  setDialect ({ commit }, dialect) {
    commit('SET_DIALECT', dialect)
  }

SET_DIALECT: (state, dialect) => {
    state.dialect = dialect
  }

dialect: 'zh'