vite + element-plus + vue3实现网站国际

有时候我们的网站需要做国际化的语言切换，今天试着做了一下
首先我们要分成两部分

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 ，还有一点使用这种国际化的方式的话，应当在项目启动时就明确要不要做国际化，不然开发完成后期要改的话就很烦🥂