vue3 实现语言切换（vue-i18n + element-plus 国际化）

1、 安装依赖

npm install element-plus vue-i18n -S --registry=https://registry.npmmirror.com

2、 定义语言文件包

1. 定义 中文 文件 src/lang/en-us/index.js

export default {
  'modelname.demo.name': 'heidi',
  'manage.search.options.sysName': 'system name',
}

2. 定义 英文 文件 src/lang/zh-cn/index.js

export default {
  'modelname.demo.name': '海蒂',
  'manage.search.options.sysName': '系统名称',
}

3. 定义 vue-i18n 配置文件 src/lang/index.js

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

export const LOCALE_OPTIONS = [
  { label: '中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' }
]
const i18n = createI18n({
  locale: localStorage.getItem('locale-lang') || navigator.language || navigator.browserLanguage,
  fallbackLocale: 'zh-CN',
  legacy: false,
  allowComposition: true,
  messages: {
    'en-US': en,
    'zh-CN': cn
  }
})
export default i18n

4. 定义 vue-i18n hook文件 src/hooks/locale.js

import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
export default function useLocale() {
  const i18 = useI18n()
  const currentLocale = computed(() => {
    return i18.locale.value
  })
  console.log(currentLocale.value)
  const changeLocale = (value) => {
    if (i18.locale.value === value) {
      return
    }
    i18.locale.value = value
    localStorage.setItem('locale-lang', value)
  }
  return {
    currentLocale,
    changeLocale
  }
}

3、 在入口文件中配置

1. 在入口 src/main.js 文件中注册 vue-i18n 实例

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import i18n from './lang'
const app = createApp()
app.use(ElementPlus)
   .use(i18n)
   .mount('#app')

2. 在入口 src/App.vue 组件中同步 element-plus 语言配置

<template>
  <el-config-provider :locale="locale">
    <div class="app">
      <router-view />
    </div>
  </el-config-provider>
</template>
<script setup>
import useLocale from '@/hooks/locale'
import { computed } from 'vue'
const { currentLocale } = useLocale()
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'
import en from 'element-plus/es/locale/lang/en.mjs'
const locale = computed(() => {
  return currentLocale.value === 'en-US' ? en : zhCn
})
</script>

4、 在组件中使用

<template>
  <div class="i18n-container">
    <h3>国际化：</h3>
    <el-select v-model="vmodelCurrentLocale" placeholder="请选择语言" style="width: 280px" @change="fnChangeLang">
      <el-option v-for="item in localeOptions" :key="item.label" :label="item.label" :value="item.value" />
    </el-select>
    <div>{{ $t('modelname.demo.name') }}</div>
    <div>{{ $t('manage.search.options.sysName') }}</div>
    <div>{{ resMsg }}</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 1、语言切换 options
import { LOCALE_OPTIONS } from '@/lang'
const localeOptions = ref(LOCALE_OPTIONS)

// 2、定义当前 locale、改变 locale 方法
import useLocale from '@/hooks/locale'
const { changeLocale, currentLocale } = useLocale()
const vmodelCurrentLocale = computed({
  get() {
    return currentLocale.value
  },
  set(value) {
    changeLocale(value)
  }
})
const fnChangeLang = (lang) => {
  changeLocale(lang)
}

// 3、在 template 模版中通过 $t(）使用变量，在 script 中通过 const { t } = useI18n() 使用变量
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const resMsg = computed(() => t('modelname.demo.name'))
</script>
<style lang="scss" scoped>
.i18n-container {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ccc;
  padding: 10px;
  margin: 20px 0;
  border-radius: 4px;
}
</style>