vue3-element-plus项目中使用vue-i18n国际化插件

vue-i18n国际化

安装

npm install vue-i18n

配置

配置语言包

创建locales文件夹，在文件夹中创建en.ts和zh.ts文件，分别用于存放英文和中文的语言包。

    
    // locales/en.ts
    export default {
      message: {
        hello: 'hello',
      },
    }
    // locales/zh.ts
    export default {
      message: {
        hello: '你好',
      },
    }

配置store

- 在store/modules中创建locale.ts文件，用于存放国际化的状态。

    // store/modules/locale.ts
    import { defineStore } from 'pinia'
    import zhCn from 'element-plus/es/locale/lang/zh-cn'
    import en from 'element-plus/es/locale/lang/en'
    const elLocaleMap = {
      'zh-CN': zhCn,
      en: en
    }
    export const useLocaleStore = defineStore('locale', {
      state: () => ({
        currentLocale: {
          //当前语言
          lang:"zh",
          //element-plus的语言包
          elLocale: elLocaleMap[getStorage('lang') || 'zh-CN'],
        }
      }),
      getters: {
        getCurrentLocale() {
          return this.currentLocale
        },
      },
      actions: {
        setCurrentLocale(localeMap) {
          // this.locale = Object.assign(this.locale, localeMap)
          this.currentLocale.lang = localeMap?.lang
          this.currentLocale.elLocale = elLocaleMap[localeMap?.lang]
          setStorage('lang', localeMap?.lang)
        }
      }
    })
    export const useLocaleStoreWithOut = () => {
      return useLocaleStore(store)
    }

创建vuei18n实例

创建i18n.ts文件，用于配置i18n。

  // plugins/i18n.ts
  import { createI18n } from 'vue-i18n'
  import { useLocaleStoreWithOut } from '@/store/modules/locale'
  import en from "@/locales/en.ts"
  import zh from "@/locales/zh.ts"
  export let i18n: ReturnType<typeof createI18n>
  // 用于创建vuei18n实例的方法
  const createI18nOptions = ()=>{
    const localeStore = useLocaleStoreWithOut()
    const locale = localeStore.getCurrentLocale
    return {
      //当前语言
      locale: locale.lang,
      //默认语言包, 当没有匹配的语言包时使用默认语言包
      fallbackLocale: locale.lang,
      //语言包
      messages: {
        en,
        zh,
      },
    }
  }

  // 使用i18n的方法
  export const setupI18n = (app: App<Element>) => {
    const options = createI18nOptions()
    i18n = createI18n(options) as I18n
    app.use(i18n)
  }

在main.ts中使用i18n。

  // main.ts
  import { setupI18n } from '@/plugins/i18n'
  const setupAll = async () => {
      const app = createApp(App)
      setupI18n(app)
      app.mount('#app')
  }
  setupAll()

新增hook

在hooks文件夹中创建useLocale.ts 文件，用于切换语言。

  import { i18n } from '@/plugins/vueI18n'
  import { useLocaleStoreWithOut } from '@/store/modules/locale'
  // 切换语言的方法
  const setI18nLanguage = (locale: LocaleType) => {
    const localeStore = useLocaleStoreWithOut()
    if (i18n.mode === 'legacy') {
      i18n.global.locale = locale
    } else {
      ;(i18n.global.locale as any).value = locale
    }
    // 存储当前语言
    localeStore.setCurrentLocale({
      lang: locale
    })
  }

  export const useLocale = () => {

    const changeLocale = async (locale: LocaleType) => {
      // 获取全局的i18n实例
      const globalI18n = i18n.global
      // 设置语言
      globalI18n.locale = locale
      // 存储当前语言
      setI18nLanguage(locale)
    }
    return {
      changeLocale
    }
  }

使用

在组件中使用

  <script setup lang="ts">
  // 引入useLocale
  import { useLocale } from '@/hooks/useLocale'
  // 使用useLocale
  const { changeLocale } = useLocale()
  // 切换语言
  const changeLocale = (locale) => {
    changeLocale(locale)
  }
  </script>
  <template>
    <div>
      <el-button @click="changeLocale('zh')">中文</el-button>
      <el-button @click="changeLocale('en')">英文</el-button>
    </div>
    <div>
      <!-- 根据当前语言显示不同的类型 此处为 hello 或者 你好 -->
      {{ $t('message.hello')}} 
    </div>
  </template>

element-plus组件国际化

需要配置 ElConfigProvider 组件的 locale 属性。
可以将 ElConfigProvider 组件封装在一个组件中，
然后在组件中然后在App.vue中使用。
- 步骤
  1. 在components文件夹中创建 ConfigGlobal 文件夹，用于封装 ElConfigProvider 组件。
   - ConfigGlobal
     > index.ts 用于导出组件
     > ConfigGlobal.vue 用于封装 ElConfigProvider 组件
  2. ConfigGlobal.vue 
  

      <!-- components/ConfigGlobal.vue -->
      <script setup lang="ts">
        import { ElConfigProvider } from 'element-plus'
        import { useLocaleStore } from '@/store/modules/locale'
        const localeStore = useLocaleStore()
        const currentLocale = computed(() => localeStore.currentLocale)
      </script>
      <template>
      <ElConfigProvider
        :locale="currentLocale.elLocale"
        :message="{ max: 1 }"
      >
        <slot></slot>
      </ElConfigProvider>
      </template>
      ```

    4. 在App.vue中使用
 
      ```vue
      <template>
        <ConfigGlobal>
          <router-view></router-view>
        </ConfigGlobal>
      </template>