Vue3+i18n多语言动态国际化设置步骤详解

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所调用方法，全局引入即可用！