vue3中使用vue-i18n国际化

一、安装

npm install vue-i18n
yarn add vue-i18n

二、新建i18n文件

import { createI18n } from 'vue-i18n'

let messages = {
  zh: {
      hello: '你好',
  },
  en: {
      hello: 'hello',
  }
}

const i18n = createI18n({
  locale: localStorage.getItem('lang') || 'zh', // 设置当前语言类型
  legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages
})

export default i18n

三、main.js中注册

import i18n from './i18n'
app.use(i18n)

四、vue3中使用

1、模板中使用
<el-button type="primary" @click="handleQuery">{{ $t('search') }}</el-button>

2、属性中使用
<el-table-column :label="$t('personName')" prop="firstName" />

3、setup中使用
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 解构出t方法
//用监听创建变量，才能保证响应式
const userAccount = computed(()=>{
   return t('userAccount')
})

4、js文件中使用

  方法1
import i18n from '@/i18n' //如果是vue文件以外的地方使用，可用这种方式(比如路由)
const status = i18n.global.t('status')  

  方法2
//把js文件中跟国际化相关的内容定义成字符串，在vue组件中要用的时候，再使用eval转化成对象使用。如：
export const tableDemoColumn = `[
    { prop: 'menuName', label: '菜单名称' },
    { prop: status, label: t('status') }
]`
在vue组件中使用时：
import { useI18n } from 'vue-i18n'
import { tableDemoColumn } from './table.js'

const { t } = useI18n()
const tableColumn = ref(eval(tableDemoColumn))

两种方法比较
方法1使用起来简单，但是不能实时切换语言；
方法2使用起来麻烦，但可以实现实时切换语言。

五、设置全局语言切换，从远程获取语言包

1、导航栏设置语言下拉
<el-dropdown class="right-menu-item hover-effect" @command="changeLanguage" style="padding-top: 20px;">
 <span class="el-dropdown-link" style="color:#fff">
     {{ curLanguageName }}
     <el-icon class="el-icon--right">
       <arrow-down />
     </el-icon>
   </span>
   <template #dropdown>
     <el-dropdown-menu>
       <el-dropdown-item
           v-for="item of languageList"
           :key="item.value"
           :command="item.value"
         >
           {{ item.label }}
         </el-dropdown-item>
     </el-dropdown-menu>
   </template>
 </el-dropdown>

2、切换语言获取接口语言包
import { useI18n } from 'vue-i18n'
const { locale, t, setLocaleMessage } = useI18n()
const curLanguage = ref("zh")
const curLanguageName = ref("中文")
const languageList = ref([{
  value: 'zh',
  label: '中文'
},{
  value: 'en',
  label: '英文'
}])

// 获取语言包
function initLanguage(lang = 'zh', isInit) {
  emits('toggleLanguage', lang)

  getLanguagePack(lang).then(res => {
    if(res.data && res.data[lang]){
      setLocaleMessage(lang, res.data[lang]); // 设置语言包
      isInit && proxy.$modal.msgSuccess("语言设置成功");
    }else{
      proxy.$modal.msgError("语言设置失败");
    }
  });
}
// 切换语言
function changeLanguage(lang) {
  console.log("lang", lang);

  curLanguage.value = lang
  locale.value = lang;
  localStorage.setItem("curLanguage", lang);

  languageList.value.forEach(item =>{
    if(item.value === lang){
      curLanguageName.value = item.label
    }
  })

  initLanguage(lang, true)
}

六、element-plus组件切换语言

<template>
  <el-config-provider :locale="locale" size="small">
    <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
      <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
      <sidebar v-if="!sidebar.hide" class="sidebar-container" />
      <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
        <div style="height:98px">
          <div class="fixed-header">
            <navbar @setLayout="setLayout" @toggleLanguage="toggleFn" />
            <tags-view v-if="needTagsView" />
          </div>
        </div>
        <app-main />
        <settings ref="settingRef" />
      </div>
    </div>
  </el-config-provider>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const language = ref('zh')
const locale = computed(() => (language.value === 'zh' ? zhCn : en))

const toggleFn = (lang) => {
  language.value = lang === 'zh' ? 'zh' : 'en' 
}
</script>