vue3.0前端国际化（支持中英文切换）

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

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

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

import{ createI18n }from'vue-i18n'import messages from'./langs'//从localStorage获取语言选择。const i18n =createI18n({legacy:false,locale:localStorage.getItem('lang')||'zh',//语言包
    messages
})exportdefault i18n

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

import en from'./en';import zh from'./zh';exportdefault{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')exportdefault app

3.在页面中使用国际化

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

<!--切换中英文--><el-dropdown-menu><el-dropdown-item
    key="zh":label="$t('message.chinese')"
    value="zh"
    @click="selectLang('zh')">{{$t("message.chinese")}}</el-dropdown-item
  ><el-dropdown-item
    key="en"
    label="English"
    value="en"
    @click="selectLang('en')">English</el-dropdown-item
  ></el-dropdown-menu><p class="login_panle_form_title_p">{{$t("message.appName")}}</p><script setup>import{ useI18n }from"vue-i18n";const{ locale }=useI18n();const{ t }=useI18n();const langsData = localStorage.getItem("lang");//切换中英文constselectLang=(lang)=>{
  localStorage.setItem("lang", lang);
  locale.value = lang;};</script>

在js中 使用

ElMessage({type:"error",message:t("message.loginInfoTips"),showClose:true,});

4.效果展示