Vue3 Vite使用i18n配置国际化,就是根据它的规则自己建立一套语言字典,对于每一个字都有统一的标识,我们在文中使用该标识代替某一语言,然后它内部就会自动转为你需要查看的语言
下载安装
NPM
npm install vue-i18n@next
准备语言文件
- src/i18n/zh-CN.js
const zh_CN = {}
zh_CN.nav = {}
zh_CN.nav.title='博客管理系统'
zh_CN.nav.chi='简体中文'
zh_CN.nav.eng='英语'
zh_CN.nav.personalCenter='个人中心'
zh_CN.nav.logout='退出登录'
export default zh_CN
- src/i18n/en-US.js
const en_US = {}
en_US.nav = {}
en_US.nav.title='Blog management system'
en_US.nav.chi='CN'
en_US.nav.eng='EN'
en_US.nav.personalCenter='Personal Center'
en_US.nav.logout='Sign Out'
export default en_US
配置文件
- src/i18n/index.js
import { createI18n } from 'vue-i18n'
// 导入自定义国际化文件
import zh_CN from './zh-CN'
import en_US from './en-US'
const i18n = createI18n({
legacy: false,
locale: 'zh_CN', // 默认语言
globalInjection: true, // 全局注册 $t 方法
messages: {
zh_CN: zh_CN,
en_US: en_US
},
})
export default (app)=> {
app.use(i18n)
}
全局配置
- src/main.js
// 在main.js中引入
import { createApp} from 'vue'
import App from './App.vue'
import installi18n from './i18n/index'
const app = createApp(App)
installi18n(app)
app.mount('#app')
Template
<template>
<div class="header">
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage">
<el-icon v-if="!collapse"><Fold /></el-icon>
<el-icon v-else><Expand /></el-icon>
</div>
<div class="logo">{{ $t("nav.title") }}</div>
<div class="header-right">
<div class="header-user-con">
<el-radio-group v-model="langToggle"
size="small"
@change="changeLanguage"
style="margin-left: 15px;">
<el-radio-button :label="chi">{{$t("nav.chi")}}</el-radio-button>
<el-radio-button :label="eng">{{$t("nav.eng")}}</el-radio-button>
</el-radio-group>
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link" style="font-weight:bold;">
{{username}}
<el-icon class="el-icon-caret"><caret-bottom class="el-icon-caret-ic"/></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="user">{{ $t("nav.personalCenter")}}</el-dropdown-item>
<el-dropdown-item divided command="loginout">{{ $t("nav.logout") }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</template>
<script>
import { computed, onMounted, ref } from "vue";
import { useI18n } from 'vue-i18n';
export default {
setup() {
// vue-i18n提供了一个狗子函数,userI18n(),暴露出locale属性用于切换语言
const { locale } = useI18n()
console.log(localStorage.getItem("locale") || 'zh_CN')
// 要切换的语言
locale.value = localStorage.getItem("locale") || 'zh_CN'
const chi = useI18n().t('nav.chi')
const eng = useI18n().t('nav.eng')
let myLocale = useI18n().locale.value
console.log(chi, eng, myLocale)
// 切换按钮选中的值
const langToggle = myLocale === 'zh_CN' ? ref(chi) : ref(eng)
console.log(langToggle.value)
function changeLanguage(e) {
if (e == chi) {
myLocale = 'zh_CN'
locale.value = 'zh_CN'
} else if(e == eng) {
myLocale = 'en_US'
locale.value = 'en_US'
}
localStorage.setItem('locale', myLocale)
}
// 定义方法集合,整体return出去
let methods = {
changeLanguage,
}
return {
langToggle,
chi,
eng,
...methods
};
},
};
</script>
Element Plus组件国际化
全局配置
参考官方文档 https://element-plus.gitee.io/zh-CN/guide/i18n.html#configprovider
- src/plugins/element.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
import localeEN from 'element-plus/lib/locale/lang/en'
import * as ElIconModules from '@element-plus/icons-vue'
export default (app) => {
Object.keys(ElIconModules).forEach(function (key) {
app.component(ElIconModules[key].name, ElIconModules[key])
})
app.use(ElementPlus, {
// 全局配置,判断当前localStorage的值并初始化
locale: localStorage.getItem("locale") === 'zh_CN' ? localeZH : localeEN
})
}
ConfigProvider
Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置
<el-config-provider :locale="eLocale">
<el-container>
<div class="demo-color-block">
<el-color-picker v-model="color1" />
</div>
</el-container>
</el-config-provider>
- script
<script>
import { computed, onMounted, ref } from "vue";
import { useI18n } from 'vue-i18n';
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
import localeEN from 'element-plus/lib/locale/lang/en'
export default {
setup() {
// 自定义国际化
// vue-i18n提供了一个狗子函数,userI18n(),暴露出locale属性用于切换语言
const { locale } = useI18n()
console.log(localStorage.getItem("locale") || 'zh_CN')
// 要切换的语言
locale.value = localStorage.getItem("locale") || 'zh_CN'
const chi = useI18n().t('nav.chi')
const eng = useI18n().t('nav.eng')
let myLocale = useI18n().locale.value
console.log(chi, eng, myLocale)
// Element Plus 组件国际化
const eLocale_zh = ref(localeZH)
const eLocale_en = ref(localeEN)
let eLocale = localStorage.getItem("locale") === "zh_CN" ? eLocale_zh : eLocale_en
// 切换按钮选中的值
const langToggle = myLocale === 'zh_CN' ? ref(chi) : ref(eng)
console.log(langToggle.value)
function changeLanguage(e) {
if (e == chi) {
myLocale = 'zh_CN'
locale.value = 'zh_CN'
// 组件国际化
const temp = eLocale_zh.value
eLocale_zh.value = eLocale_en.value
eLocale_en.value = temp
} else if(e == eng) {
myLocale = 'en_US'
locale.value = 'en_US'
// 组件国际化
const temp = eLocale_en.value
eLocale_en.value = eLocale_en.value
eLocale_zh.value = temp
}
localStorage.setItem('locale', myLocale)
}
const color1 = ref('#409EFF')
return {
color1,
eLocale
};
},
};
</script>
到此结束,欢迎大神点评,指出不足指出!!