- 使用 vue-i18n/i18next 库
vue-i18n
官方文档：https://kazupon.github.io/vue-i18n/zh/
步骤1：安装vue-i18n
npm install vue-i18n@next
步骤2：设置vue-i18n
// src/i18n.ts
import { createI18n } from 'vue-i18n'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import enUs from 'element-plus/es/locale/lang/en';
// 语言资源
const messages = {
en: {
message: {
hello: 'Hello World!',
welcome: 'Welcome to Vue 3 + i18n',
...zhCn,
}
},
zh: {
message: {
hello: '你好，世界！',
welcome: '欢迎使用 Vue 3 + i18n',
...enUs,
}
}
}
// 创建 i18n 实例
const i18n = createI18n({
locale: 'en', // 默认语言
fallbackLocale: 'en', // 回退语言
messages // 语言消息
})
export default i18n
步骤3：在 Vue 项目中引入 i18n
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n' // 引入 i18n 配置
const app = createApp(App)
//全局注册t方法
app.config.globalProperties.t = i18n.global.t
app.use(i18n) // 将 i18n 实例添加到 Vue 应用中
app.mount('#app')
步骤4：在组件中使用国际化
<template>
<div>
<h1>{{ t('message.hello') }}</h1>
<p>{{ t('message.welcome') }}</p>
</div>
</template>
步骤5：切换语言
<template>
<div>
<h1>{{ t('message.hello') }}</h1>
<p>{{ t('message.welcome') }}</p>
<button @click="switchLanguage('en')">English</button>
<button @click="switchLanguage('zh')">中文</button>
</div>
</template>
<script>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const switchLanguage = (lang) => {
locale.value = lang
}
</script>
