1、 安装依赖
npm install element-plus vue-i18n -S --registry=https://registry.npmmirror.com
2、 定义语言文件包
- 定义 中文 文件 src/lang/en-us/index.js
export default {
'modelname.demo.name': 'heidi',
'manage.search.options.sysName': 'system name',
}
- 定义 英文 文件 src/lang/zh-cn/index.js
export default {
'modelname.demo.name': '海蒂',
'manage.search.options.sysName': '系统名称',
}
- 定义 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
- 定义 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、 在入口文件中配置
- 在入口 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')
- 在入口 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>
