当前位置：首页 > backend >正文

【Vue✨】Vue3 中英文切换功能实现

backend 2025/8/11 13:26:54

Vue3 中英文切换功能实现

在 Vue3 项目中，支持多语言界面的项目，如电商平台、社交媒体、在线教育平台等需要多语言支持的网站会有中英文切换功能。本次我们将使用 vue-i18n 插件来管理语言的切换。

1. 安装依赖

首先，我们需要安装 vue-i18n 插件。打开终端，进入你的 Vue3 项目目录，执行以下命令：

npm install vue-i18n@next

2. 配置 `vue-i18n`

2.1 创建语言文件

在 src 目录下，创建一个 locales 文件夹，用于存放语言文件。我们将分别创建 en.json 和 zh.json 语言文件。

en.json (英语)

{"greeting": "Hello, welcome to our website!"
}

zh.json (中文)

{"greeting": "你好，欢迎来到我们的网站！"
}

2.2 配置 `i18n`

接下来，在 src 目录下的 main.js 中配置 vue-i18n。

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'// 导入语言文件
import en from './locales/en.json'
import zh from './locales/zh.json'const i18n = createI18n({locale: 'en',  // 默认语言messages: {en,zh}
})createApp(App).use(i18n).mount('#app')

3. 在组件中使用语言

在组件中使用 t 函数来获取翻译后的文本。

3.1 修改 `App.vue`

<template><div id="app"><h1>{{ $t('greeting') }}</h1><button @click="switchLanguage">Switch Language</button></div>
</template><script setup>
import { useI18n } from 'vue-i18n'const { locale } = useI18n()// 切换语言
const switchLanguage = () => {locale.value = locale.value === 'en' ? 'zh' : 'en'
}
</script><style scoped>
/* 样式可根据需要自定义 */
</style>

在上面的代码中，我们通过 useI18n 获取了 locale，并在按钮的点击事件中切换语言。通过 $t('greeting') 来获取当前语言的翻译。