网站国际化

Element-plus配置国际化 

国际化 | Element Plus

网站全局国际化

安装 vue-i18n

pnpm i vue-i18n

创建中英文语言包，也就是项目中用到的国际化名称。

src\language\en.ts

export default {
  message: {
    home: 'home',
    mine: 'mine',
  },
}

 src\language\zh.ts

export default {
  message: {
    home: '首页',
    mine: '个人中心',
  },
}

 配置中英文语言包

src\language\i18n.ts

import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const i18n = createI18n({
  locale: 'en',
  // 如果高版本报错，设置这个属性
  legacy: false,
  messages: {
    zh,
    en,
  },
})
export default i18n

 在 main.ts 中进行全局注册

src\main.ts

import i18n from '@/language/i18n'
app.use(i18n)

 在App.vue 中进行使用 vue-18n。

src\App.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const { locale: localeLanguage, t } = useI18n()
const locale: any = ref(zhCn)
const chaneLang = (language: any) => {
  // elementUI 国际化
  locale.value = language
  // 网站国际化
  localeLanguage.value = language.name
}
</script>

<template>
  <el-config-provider :locale="locale">
    <button @click="chaneLang(zhCn)">中文</button>
    <button @click="chaneLang(en)">英文</button>
    <router-link to="/home">{{ t('message.home') }}</router-link>
    <router-link to="/mine">{{ t('message.mine') }}</router-link>
    <router-view></router-view>
  </el-config-provider>
</template>

参考文章：

vue-i18n插件报错

vue i18n 国际化保姆级教程_看不懂自己找原因 - 掘金