vue3+vue-i18n+elementPlus实现国际化语言

1.第一步下载依赖。

npm install vue-i18n

2.文件夹创建。

  之后在src目录下创建i18n文件夹,当然文件名随便。文件结构如下，分别创建en.ts，zh.ts，index.ts文件来存放英文和中文两种语言文字。

zh.ts文件大致如下：

import cockpit from "./modules/cockpit"
//zh
export default {
    common:{
        loginName:'登录',
        logoutText:'登出',
        cPassword:'修改密码'
    },
    message: {
      hello: '你好',
      name:'姓名'
    },
    cockpit:{
      ...cockpit.zh
    }
  }

en.ts大致如下：
 

import cockpit from "./modules/cockpit"
export default {
    common:{
        loginName:'login',
        logoutText:'logout',
        cPassword:'change password'
    },
    message: {
      hello: 'hello',
      name:'name'
    },
    cockpit:{
       ...cockpit.en
    }
    
  }

相当于每需要多语言的文字，那就需要写入这两份文件中。

index.ts如下：

import { createI18n } from "vue-i18n";
import en from './en'
import zh from './zh';
let language=localStorage.getItem('language');
const i18n = createI18n({
  locale:language?JSON.parse(language):'zh', // 默认是中文
//   fallbackLocale: 'en', // 语言切换的时候是英文
  globalInjection:true,//全局配置$t
  legacy:false,//vue3写法
  messages:{en,zh}// 需要做国际化的语种,就是刚才编写的两个语言
 
})
 
export default i18n

3.如何切换。

import { useI18n } from "vue-i18n";
const { locale,t } = useI18n()
let currentLanguage:any=useLocalStorage('language',"zh");
const changeLanguage=(lang:string)=>{
  currentLanguage.value=lang;
  locale.value=lang;
}

切换实际就是通过 locale.value=lang; lang可以是‘zh’或‘en’或其他语言。切换同时保存到localStorage或sessionStorage中。这样可以保证刷新页面保留语言。

4.如何使用。

4.1在vue3的标签中使用法：

<label>{{$t('common.logoutText')}}</label>

 其中common.logoutText就是在zh.ts或en.ts中定义的属性。

4.2在ts中使用法：

const { locale,t } = useI18n();
t('common.logoutText')

5.elementPlus组件国际化

使用elementPlus中Config Provider 全局配置

<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const ellocale = computed(() => locale.value=='zh'?zhCn:en)
</script>

<template>
    <el-config-provider :locale="ellocale">
      <router-view/>
    </el-config-provider>
 
</template>

6.结合后台接口。

将存储的语言通过每个接口传递到后台，让后台配合显示语言。