vue3中如何使用vue-i18n实现多语言切换

一、安装依赖

npm install vue-i18n" target="_blank">vue-i18n@next
//或者
yarn add vue-i18n" target="_blank">vue-i18n@next

二、新建语言配置文件

1. 新建lang文件夹用于存放所用到的语言包
2. 在lang文件夹下新建index.ts用于根据不同的语言参数引用不同的语言包
3. 新建对应的要用到的语言文件例如zh.ts, en.ts等其他语言文件

index.ts

import { createI18n } from "vue-i18n" target="_blank">vue-i18n";
import zh from "./zh";
import en from "./en";

const i18n = createI18n({
  locale: "zh", // 定义默认语言为中文
  legacy: false,
  globalInjection: true,
  locale: localStorage.getItem('lang') || 'zh',
  messages: {
    zh,
    en,
  },
});

export default i18n;

指定语言文件例如zh.ts

const zh = {
    message: {
        lang: '中文',
        personal: '个人中心',
        logout: '退出登录',
        hello: '您好',
        welcome: '祝你开心每一天',
        more: '查看更多',
        broker: '紧急人',
        create_time: '创建时间',
    }
}
export default zh;

三、在main.ts中注册

import i18n from "./lang/index";
app.use(i18n);

四、使用

1、在template中使用

<template>
    <div>
    	{{$t('message.lang')}}
    </div>
</template>

2、再setup 中使用

import { useI18n } from 'vue-i18n" target="_blank">vue-i18n'
const { t } = useI18n()
console.log(t('message.lang'))

3、语言切换

<script lang="ts" setup>
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n" target="_blank">vue-i18n'

const { locale } = useI18n()

const state = reactive({
  curLanguage: 'zh',
})

const changeLanguage = () => {
  state.curLanguage = 'zh'
  locale.value = state.curLanguage
  //缓存到localStorage中下次进来还是切换后的语言
  localStorage.setItem('lang', "zh")
}
</script>

以上这篇vue3中如何使用vue-i18n实现多语言切换就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。