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

首先我们要分成两部分

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";

<el-config-provider :locale="locale">

    <div>

      <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