美文网首页vue3
Vue3 + Element Plus + i18n 国际化

Vue3 + Element Plus + i18n 国际化

作者: YanaDH | 来源:发表于2022-07-19 09:10 被阅读0次

    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'
    
    // 创建 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 用于全局配置国际化的设置
    el-config-provider 由 Element Plus 按需引入 - 自动导入
    el-config-provider 手动导入: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)
    }
    

    相关文章

      网友评论

        本文标题:Vue3 + Element Plus + i18n 国际化

        本文链接:https://www.haomeiwen.com/subject/omhdirtx.html