1、技术介绍
i18n：Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中
i18n的官网地址安装 | Vue I18n (kazupon.github.io)
2、插件安装
npm install vue-i18n@9 --save
需要注意的是vue3最好使用9.x以上的版本！
3、创建i18n所需文件夹（这里最好放置src下） 🍺🍺
当然名字你可随意，只要后面一一对应即可！
下面来分解每个js文件
这里要说一下，vue3建议结合Typescript使用！我这里以为公司方面原因继续了js！👇 zh-CN.js
export default {common: {more: "查看更多",},leftMenus: {"/": "首页",Home: "首页",home: "首页",},headMenus: {"subTitle": "机构服务平台","userName": "张三"},login: {"personal_center": "个人中心","sign_out": "退出"}};
👇 en_US.js
export default {common: {more: "Look More",},leftMenus: {"/": "Home",Home: "Home",home: "Home",},headMenus: {"subTitle": "Organization service platform","userName": "ZhangSan"},login: {"personal_center": "personal center","sign_out": "sign out"}};
这两个文件必须一一对应！
👇 index.js
import {createI18n } from 'vue-i18n'import zhCN from './locales/zh-CN'import enUS from './locales/en_US'const i18n = createI18n({legacy: false,locale: 'zh-cn', // 默认显示语言messages: {'zh-cn': zhCN,'en-us': enUS}})export default i18n
main.js引入i18n配置文件 🍟🍟
接下来就是组件内使用了🍕🍕🍕🍕
<script setup lang="js">// 国际化import {useI18n } from 'vue-i18n'const I18n = useI18n()const {locale } = useI18n()console.warn('locale' , locale.value) // 可以拿到我们当前设置的默认语言，切换语言更改locale.value的值即可，// 但要跟你index.js中message设置的值一致！</script>
要更改的值设置
例如：
div class="user-name">{{$t('headMenus.userName') }}</div>
$t为i18n所调用方法，全局引入即可用！
