1 前言

本篇旨在 Vue3 + Element Plus 國際化配置，支持多語言切換

2 Vue3 國際化

2.1 安裝 vue-i18n

npm i vue-i18n

2.2 新建 locales 文件夾

以簡體中文和英文為例

• 在 src 下新建 locales 文件夾
• 在 locales 文件夾下新建 zh-cn.ts

export default {
  buttons: {
    login: '登錄'
  },
  menus: {
    home: '首頁'
  }
}

• 在 locales 文件夾下新建 en.ts

export default {
  buttons: {
    login: 'Login'
  },
  menus: {
    home: 'Home'
  }
}

• 在 locales 文件夾下新建 index.ts

import { createI18n } from 'vue-i18n'
import zhCn from './zh-cn'
import en from './en'

// 創(chuàng)建 i18n
const i18n = createI18n({
  legacy: false,
  globalInjection: true, // 全局模式，可以直接使用 $t
  locale: localStorage.getItem('lang') || 'zhCn',
  messages: {
    zhCn,
    en
  }
})

export default i18n

2.3 注冊 i18n

在 main.ts 文件下注冊 i18n

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales'

const app = createApp(App)

app.use(i18n)

app.mount('#app')

2.4 使用方法

2.4.1 在 template 中的使用

{{ $t('menus.home') }}

2.4.2 在 ts 中的使用

import i18n from './locales'

console.log(i18n.global.t('menus.home'))

3 Element Plus 國際化

Element Plus 官方提供了一個 Vue 組件 ConfigProvider 用于全局配置國際化的設(shè)置
el-config-provider 由 Element Plus 按需引入 - 自動導(dǎo)入
el-config-provider 手動導(dǎo)入：import { ElConfigProvider } from 'element-plus'

<template>
  <el-config-provider :locale="useAppStoreHook().locale === 'zhCn' ? zhCn : en">
    <app />
  </el-config-provider>
</template>

<script lang="ts" setup>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'
import { useAppStoreHook } from '@/store/modules/app' //store存放語言配置
</script>

4 語言切換

切換語言時，修改 store 、 localstorage 和 i18n 中的語言配置

// store/modules/app

import { defineStore } from 'pinia'
import { store } from '@/store'
import i18n from '@/locales'

const useAppStore = defineStore('app', {
  state: () => {
    return {
      locale: localStorage.getItem('lang') || 'zhCn'
    }
  },
  actions: {
    SET_LOCALE(locale: string) { //語言切換
      this.locale = locale
      storageLocal.setItem('lang', locale)
      i18n.global.locale.value = locale
    }
  }
})

export function useAppStoreHook() {
  return useAppStore(store)
}