vue3 i18n配置详细教学

一. 安装类库

npm install vue-i18n@next

@next 表示安装i18n 最新的 vue3的版本

二. 配置 i18n的 配置文件

// i18n.tsimport { createI18n } from 'vue-i18n'import zh from './zh'import en from './en'const i18n = createI18n({legacy: false,// 没有该参数可能会报错locale: 'zh',messages: {zh,en}})export default i18n// zh.tsexport default {message: {homeText: '主页',mineText: '个人中心'}}

三. 挂载到实例上

// main.tsimport i18n from './language/i18n'const app = createApp(App)...app.use(i18n)

四. 使用

// 使用的 xxx.vueimport { useI18n } from "vue-i18n";const { t } = useI18n() 
{{t('message.homeText') }} 

点击按钮切换语言

import { useI18n } from 'vue-i18n'// 核心思想就是改变 useI18n 解构出来的locale// 笔者 这里为了和页面中的其他变量 区别- 取别名 i18nLanguage。const { locale: i18nLanguage } = useI18n()const toggle = (languageKey) => {i18nLanguage.value = languageKey// zh en}点击切换中文点击切换英文