- 使用 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,
}
}
}
// 創(chuàng)建 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>
