有时候我们的网站需要做国际化的语言切换，今天试着做了一下
首先我们要分成两部分
element-plus 的国际化
element-plus因为他的文本啥的都是封装在内部的，我们无法去更改，比如说date-picker，所以就要使用组件库本身提供的国际化组件，当然element-plus也提供了配置的形式，
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
})
但是这样貌似不好做语言的切换，所以我就用组件的形式了
- 首先导入语言包
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/lib/locale/lang/en";
使用组件 App.vue
<el-config-provider :locale="locale">
<div class="page">
<router-view></router-view>
<button @click="changeLanguage(zhCn)">中文</button>
<button @click="changeLanguage(en)">英文</button>
</div>
</el-config-provider>
实现changeLanguage
import { ref } from "vue";
const locale = ref(zhCn);
const changeLanguage = (language: any) => {
locale.value = language;
};
这样我们在点击中文，英文按钮的时候，就会发现element-plus的组件文字就可以相互切换了（element-plus支持的语言列表）
网站中自己的文本
网页中我们自己的文字要做语言的切换的话就需要依赖vue的一个插件了: vue-i18n (是数字1不是字母l😅😡, 没错，小丑就是我)
安装
npm i vue-i18n@next
src下创建一个language文件夹
src
|-- language
| -- i18n.ts
| -- en.ts
| -- zh.ts
i18n.ts
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'
const i18n = createI18n({
legacy: false,
locale: 'zh',
messages: {
zh,
en
}
})
export default i18n
注意: 在这里需要配置 legacy: false，不然会报错：Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
en.ts 和 zh.ts里面就是配置我们对应的中文和英文对应的文本啦
en.ts
export default {
message: {
home: 'home',
mine: 'mine'
}
}
zh.ts
export default {
message: {
home: '首页',
mine: '我的'
}
}
因为 vue-i18n是一个插件嘛，所以要注册一哈
main.ts
import i18n from './language/i18n'
...
const app = createApp(App)
...
app.use(i18n)
app.mount('#app')
下面就可以去使用了
- 在 App.vue 中配置语言切换时 vue-i18n 的语言切换
在上面的element-plus国际化配置基础上
import { useI18n } from "vue-i18n";
const { locale: localeLanguage } = useI18n();
const changeLanguage = (language: any) => {
locale.value = language;
localeLanguage.value = language.name; // 在language参数中有一个name属性，值就是 zh-cn 或者 en， 这样就可以修改 vue-i18n中的语言属性了
};
- 配置了语言的切换后就要去使用了
随便找个页面了
<template>
<div>
{{ t('message.home') }}
</div>
</template>
<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>
从useI18n函数中解构出一个 t 函数，通过这个t函数就可以渲染我们的文本了，他需要一个字符串参数，这个字符串不难看出就是在 en.ts 和 zh.ts中导入的对象中的message属性中获取相关的文本
当然名字不一定message，这个名字就是任意的，而且也可以有多个对象，比如
export default {
header: {},
footer: {},
message: {}
...
}
总结：本文只是对 vue-i18n 的基本使用，毕竟目的达到啦，更多Api大家可以去官网查阅😄vue-i18n ，还有一点使用这种国际化的方式的话，应当在项目启动时就明确要不要做国际化，不然开发完成后期要改的话就很烦🥂
网友评论