GitHub Demo 地址

在線預(yù)覽

一勘纯、vue-i18n國際化

vue-i18n是一個國際化多語言插件 官網(wǎng)地址

安裝

npm install vue-i18n@9

創(chuàng)建語言文件

在項目中創(chuàng)建一個lang 文件夾用于存放不同語言的翻譯文件碳褒。在lang 文件夾下恐仑，可以按模塊創(chuàng)建不同語言的文件，如 zh-cn.ts（中文）和 en.ts（英文）

en.ts 示例

export default {
  // 路由國際化
  route: {
    Dashboard: 'Dashboard',
    DataCenter: 'Data Center',
    // setting
    SystemSetting: 'System Setting',
    SystemUser: 'User Manage',
    SystemRole: 'Role Manage',
    SystemMenu: 'Menu Manage',
    SystemDict: 'Dict Manage'
  }
}

zh-cn.ts 示例

export default {
  // 路由國際化
  route: {
    Dashboard: '首頁',
    DataCenter: '數(shù)據(jù)中心',
    // setting
    SystemSetting: '系統(tǒng)設(shè)置',
    SystemUser: '用戶管理',
    SystemRole: '角色管理',
    SystemMenu: '菜單管理',
    SystemDict: '字典管理'
  }
}

創(chuàng)建一個index.ts文件配置vue-i18n并且整合整個lang文件夾下面的所有語言文件

import { createI18n, I18nOptions } from 'vue-i18n'
import { store } from '@/store'
import { useAppStore } from '@/store/modules/app'

// 本地語言包
import enLocale from './package/en'
import zhCnLocale from './package/zh-cn'

const appStore = useAppStore(store)

function siphonI18n(prefix = 'zh-CN') {
  return Object.fromEntries(
    Object.entries(import.meta.glob('./**/*.ts', { eager: true })).map(([key, value]: any) => {
      const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1]
      return [matched, value.default]
    })
  )[prefix]
}

const messages = {
  'zh-cn': {
    ...zhCnLocale,
    ...siphonI18n('zh-cn')
  },
  en: {
    ...enLocale,
    ...siphonI18n('en')
  }
}

const i18n = createI18n({
  legacy: false, // 如果想在composition api中使用需要設(shè)置為false
  locale: appStore.language,
  // TODO: Type instantiation is excessively deep and possibly infinite.  https://github.com/intlify/vue-i18n-next/issues/1119
  messages: messages as I18nOptions['messages'],
  globalInjection: true // 如果設(shè)置true, $t() 函數(shù)將注冊到全局
})

export default i18n

// import i18n from '@/lang/index'
// const { t } = i18n.global

i18n 全局注冊

在項目的入口文件中（通常是 main.ts）儡嘶，導(dǎo)入配置

// 國際化
import i18n from '@/lang/index'

app.use(i18n).mount('#app');

使用

因為在配置vue-i18n時設(shè)置了globalInjection: true，因此可以直接使用$t

在模板中使用

<template>
  <div>
    {{ $t('route.Dashboard') }}
  </div>
</template>

在ts中使用

import i18n from '@/lang/index'

i18n.global.t('route.Dashboard')

監(jiān)聽語言改變

import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

// t('route.Dashboard') 在ts也可以這樣使用

watch(
  () => locale.value,
  (value) => {
    nextTick(() => {
        // 一些操作
    })
  }
)

語言切換

import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

locale.value = 'zh-cn'
locale.value = 'en'

實現(xiàn)語言切換的組件

<template>
  <el-dropdown trigger="click" @command="handleLanguageChange">
    <div>
      <svg-icon icon-class="language" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="appStore.language === 'zh-cn'" command="zh-cn"> 中文 </el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'en'" command="en"> English </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()
const { locale } = useI18n()

function handleLanguageChange(lang: string) {
  locale.value = lang
  appStore.changeLanguage(lang)
  if (lang == 'en') {
    ElMessage.success('Switch Language Successfully!')
  } else {
    ElMessage.success('切換語言成功戒洼！')
  }
}
</script>

效果圖

二抖棘、Element Plus 國際化

Element Plus 國際化 官網(wǎng)文檔

Element Plus 提供了一個 Vue 組件 ConfigProvider 用于全局配置國際化的設(shè)置。
這里配合pinia實現(xiàn)國際化切換

使用ConfigProvider 組件 全局配置國際化

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
</script>

<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view />
  </el-config-provider>
</template>

切換語言和監(jiān)聽改變實現(xiàn)

定義 store

import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';
import defaultSettings from '@/settings';

// 導(dǎo)入 Element Plus 中英文語言包
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';

// setup
export const useAppStore = defineStore('app', () => {
    
  const language = useStorage('language', defaultSettings.language);
    
  /**
   * 根據(jù)語言標識讀取對應(yīng)的語言包
   */
  const locale = computed(() => {
    if (language?.value == 'en') {
      return en;
    } else {
      return zhCn;
    }
  });

  /**
   * 切換語言
   */
  function changeLanguage(val: string) {
    language.value = val;
  }

  return {
    language,
    locale,
    changeLanguage
  };
});

切換語言外部調(diào)用

import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

 appStore.changeLanguage(lang)

效果圖