Vue3 国际化i18n语言库 网站多语言切换

介绍

在 Vue 3 项目中，国际化（i18n）是一个常见的需求，它允许你的应用支持多种语言，并根据用户的语言偏好显示相应的内容。为了实现国际化，你可以使用 vue-i18n 这个库，它是 Vue 官方推荐的国际化插件。

安装

npm install vue-i18n

目录结构

配置语言包

index.js

import { createI18n } from 'vue-i18n'
//国际化语言
import zh from '@/lang/zh'  //中文
import en from '@/lang/en' //英文
export default new createI18n({
    legacy: false,//组合式API
    locale: 'zh',//当前语言
    fallbackLocale: 'zh',//失败时显示语言
    messages: { //语言包
        zh, //中文
        en	//英文
    }

})

zh和en里的对象必须一一对应

ZH

 menuItem: { //菜单名称
            home: '首 页',
            packagePurchase: '套 餐 购 买',
            agentExtraction: '代 理 提 取',
            service: '在 线 客 服'
        }

EN

 menuItem: { //菜单名称
            home: 'Home',
            packagePurchase: 'Package purchase',
            agentExtraction: 'Agent extraction',
            service: 'Online customer service'
        }

导入main.js

import lang from '@/lang/index.js'
//语言包
const app = createApp(App);
app.use(lang)

页面使用

<button>{{ t('menuItem.agentExtraction') }}</button>        

import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

切换语言

const { t, locale } = useI18n()
 locale.value = 'en'