记录前端项目中经常会使用中英文切换的功能的实现，使用插件i18n及中英文自定义语言包

安装i18n

npm install vue-i18n

实现点击中英文的切换

在vuex中定义一个变量用于判断使用何种语言包

// LANG为定义的常量language
import { LANG } from '@/constant'
// 获取和设置本地存储方法
import { getItem, setItem } from '@/utils/storage'
export default {
  namespaced: true,
  state: () => ({
    language: getItem(LANG) || 'zh'
  }),
  mutations: {
    /**
     * 设置国际化
     */
    setLanguage(state, lang) {
      setItem(LANG, lang)
      state.language = lang
    }
  },
  getters:{
      // 快捷获取language
      language: (state) => state.app.language
  }
}

定义中英文切换的组件

<template>
  <el-dropdown
    trigger="click"
    class="international"
    // 选中下拉项触发函数 参数为绑定command
    @command="handleSetLanguage"
  >
    <div>
      <el-tooltip content="国际化">
        <svg-icon icon="language" />
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <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>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { defineProps, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const language = computed(() => store.getters.language)

// 切换语言的方法
const i18n = useI18n()
const handleSetLanguage = (lang) => {
    // 改变vuex中language的值
  store.commit('app/setLanguage', lang)
  ElMessage.success(i18n.t('切换成功'))
  
}
</script>

i18n的使用

插件注册并引入

// i18n/index.js
import { createI18n } from 'vue-i18n'
// 中文包
import zhLocale from './lang/zh'
// 英文包
import enLocale from './lang/en'
import store from '@/store'
const messages = {
  en: {
    msg: {
      ...enLocale
    }
  },
  zh: {
    msg: {
      ...zhLocale
    }
  }
}

const i18n = createI18n({
  // composition API
  legacy: false,
  // 全局使用t函数
  globalInjection: true,
  // 决定使用何种语言包
  locale: store.getters.language,
  messages
})
export default i18n

在上面切换语言方法中添加代码

const handleSetLanguage = (lang) => {
  // 添加
  i18n.locale.value = lang
  
  store.commit('app/setLanguage', lang)
  ElMessage.success(i18n.t('msg.toast.switchLangSuccess'))
}

接下来在模板中使用t函数设置显示的值

定义一个复用函数方便访问中文或英文包中的值

// i18n.js
import i18n from '@/i18n'

export function generateTitle(title) {
    //这里需要设置的是路由相关的值，所有使用msg.route
  return i18n.global.t('msg.route.' + title)
}

在模板中使用该函数

<template>
  <el-breadcrumb separator="/" class="breadcrumb">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbData"
        :key="item.path"
      >
        <!-- 不可点击 -->
        <span class="no-redirect" v-if="index === breadcrumbData.length - 1">{{
          generateTitle(item.meta.title)
        }}</span>
        <!-- 可点击 -->
        <span class="redirect" v-else @click="onLinkClick(item)">{{
          generateTitle(item.meta.title)
        }}</span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

国际化功能即可实现

i18n在模板中使用

语法{{ $t('引用属性' }}

// 部分代码
<el-dropdown-menu class="user-dropdown">
    <router-link to="/">
      <el-dropdown-item>{{ $t('msg.navBar.home') }}</el-dropdown-item>
    </router-link>
    <a target="_blank" href="#">
      <el-dropdown-item>{{ $t('msg.navBar.course') }}</el-dropdown-item>
    </a>
    <el-dropdown-item divided @click="logout">{{
      $t('msg.navBar.logout')
    }}
</el-dropdown-item>

i18n在script中使用

i18n.t('引用属性')

// 引入i18n
const i18n = useI18n()
// 语法 i18n.t('引用属性')
ElMessage.success(i18n.t('msg.toast.switchLangSuccess'))

i18n在js中使用

// 引入i18n
import i18n from '@/i18n'
// 语法 i18n.global.t('引用属性')
const data = i18n.global.t('msg.route.user')

本文正在参加「金石计划 . 瓜分6万现金大奖」