vue + element-ui + vue-i18n 前端国际化

最新推荐文章于 2024-08-27 18:19:11 发布

弹指歌丶

最新推荐文章于 2024-08-27 18:19:11 发布

阅读量485

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/qq_39697433/article/details/110021928

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue + element-ui 前端国际化

项目要求支持中英双语，所以就进行了一下前端的国际化，我这里是使用了vue-i18n，下面是我进行的步骤

package.json中dependencies节点添加vue-i18n

"vue-i18n": "7.3.2",

src目录下创建lang目录，存放国际化文件，分别创建index.js、en.js、zh.js三个文件

// index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie' // 将语言类别存入cookie用
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 国际化文件
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 国际化文件
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

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

const i18n = new VueI18n({
  // 设置语言 选项 en | zh
  locale: Cookies.get('language') || 'en',
  // 设置文本内容
  messages
})

export default i18n

// zh.js
export default {
  tabs: {
    title: '标题1 | 标题2 | 标题3',
    username: '账号',
    password: '密码'
  }
}

// en.js
export default {
  tabs: {
    title: 'title1 | title2 | title3',
    username: 'username',
    password: 'password'
  }
}

在src/main.js中增量添加i18n，注意增量添加，不要覆盖原有的

import i18n from './lang'

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

new Vue({
  i18n,
})

在src/store/getters.js中添加language

language: state => state.app.language,

在src/store/modules/app.js中增量添加i18n

const state = {
  language: Cookies.get('language') || 'en'
}

const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  }
}

const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  }
}

导航栏添加切换语言下拉列表

<template>
  <el-dropdown trigger="click" @command="handleSetLanguage">
    <div>
      {{ language==='zh' ? '中文' : 'English' }}
    </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('app/setLanguage', lang)
      this.$message({
        message: '设置语言成功',
        type: 'success'
      })
    }
  }
}
</script>

页面国际化

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="$tc('tabs.title', 0)" name="first">{{ $tc('tabs.title', 0) }}</el-tab-pane>
    <el-tab-pane :label="$tc('tabs.title', 1)" name="second">{{ $tc('tabs.title', 1) }}</el-tab-pane>
    <el-tab-pane :label="$tc('tabs.title', 2)" name="third">{{ $tc('tabs.title', 2) }}</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

普通文本使用方式：{{ $t('tabs.ussername') }}
标签内使用方式：:placeholder="$t('login.password')"
js内使用方式： this.$t('login.user.password.not.match')
多个值(这里可能有点问题，三个为0,1,2，两个为1,2，四个以上不是这么用的)：$tc('tabs.title', 0)