1 Element-plus配置国际化:ConfigProvider
(1)首先需要将国际化的地方包起来,如下
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { useRouter } from 'vue-router'
import zhCn from 'element-plus/dist/locale/zh-cn'
import en from 'element-plus/dist/locale/en'
import { ref } from 'vue'
const router = useRouter()
const locale = ref(zhCn)
const changeLang = (language:any)=>{
locale.value = language
}
</script>
<template>
<el-config-provider :locale="locale">
<el-time-picker v-model="value1" placeholder="Arbitrary time" />
<button @click="changeLang(zhCn)">中文</button>
<button @click="changeLang(en)">英文</button>
<button @click="()=> router.push({path: '/home'})">首页</button>
<button @click="()=> router.push({path: '/mine'})">个人中心</button>
<router-link to="/home">首页-router-link实现跳转</router-link>
<router-link to="/mine">个人中心-router-link实现跳转</router-link>
<!-- 作为顶级的视图出口 -->
<router-view/>
</el-config-provider>
</template>
<style lang="scss" scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
#app{
button{
font-size: 20px;
}
}
</style>
当按钮点击中文时,时间选择组件对应的文字会转换成中文,当点击英文时,时间选择组件对应的文字会转换成英文。
2 Vue-i18n实现网站全局国际化(1 中只能实现局部国际化,使用2可以实现全局国际化)
(1)安装:npm i vue-i18n@next
(2)在项目中新建language文件
其中i18n.ts中内容为
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'
const i18n = createI18n({
locale: 'zh',
messages: {
zh,
en
}
})
export default i18n
en.ts的内容为:
export default {
message: {
home: 'home',
mine: 'mine'
}
}
zh.ts的内容为
export default {
message: {
home: '首页',
mine: '个人中心'
}
}
(3)在main.ts中引入
(4)使用:
(5)如何切换语言