*案例使用ElementPlus ，提供国际化功能

*i18n是internationalization的缩写，它源自英文单词“internationalization”的首末字符i和n，中间的18代表了中间的字符数。 i18n是“国际化”的简称

1.在前端项目src目录下新建国际化需要的文件

（1）在langs路径下创建i18n.js

<code>import { -- --> createI18n } from 'vue-i18n'

import messages from './langs'

//从localStorage获取语言选择。

const i18n = createI18n({

legacy:false,

locale:localStorage.getItem('lang') || 'zh',//语言包

messages

})

export default i18n

（2）langs/langs/路径下创建index.js

import en from './en';

import zh from './zh';

export default {

en: en,

zh: zh

}

（3）创建zh.js

const zh = {

message: {

"appName":"XXXXX系统",

"copyright":"版权所有 © 2009-2024 上海XXXX有限公司"

}

}

（4）创建en.js

const en = {

message: {

"appName":"XXXXX System",

"copyright":"All rights reserved © 2009-2024 Shanghai XXXX Co., Ltd",

}

}

有其他语种翻译，以此类推；案例支持中英文翻译

2.在main.js中引用需要的文件（全局使用）

import App from './App.vue'

import ElementPlus from 'element-plus'

import zhCn from 'element-plus/es/locale/lang/zh-cn'

import en from 'element-plus/es/locale/lang/en'

import i18n from './langs/i18n.js'

const app = createApp(App)

app

.use(i18n)

.use(ElementPlus,

{ locale:langsData == 'en' ? en : zhCn }

)

.mount('#app')

export default app

3.在页面中使用国际化

先在上面zh.js和en.js中做好翻译(已翻译)，在页面中直接使用

<!--切换中英文-->

<el-dropdown-menu>

<el-dropdown-item

key="zh"code>

:label="$t('message.chinese')"code>

value="zh"code>

@click="selectLang('zh')"code>

>{ -- -->{ $t("message.chinese") }}</el-dropdown-item

>

<el-dropdown-item

key="en"code>

label="English"code>

value="en"code>

@click="selectLang('en')"code>

>English</el-dropdown-item

>

</el-dropdown-menu>

<p class="login_panle_form_title_p">{ -- -->{ $t("message.appName") }}</p>code>

<script setup>

import { -- --> useI18n } from "vue-i18n";

const { locale } = useI18n();

const { t } = useI18n();

const langsData = localStorage.getItem("lang");

//切换中英文

const selectLang = (lang) => {

localStorage.setItem("lang", lang);

locale.value = lang;

};

</script>

在js中 使用

ElMessage({

type: "error",

message: t("message.loginInfoTips"),

showClose: true,

});

4.效果展示