vue项目中实现国际化_el-config-provider

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）如何切换语言