vue3实现中英文切换

1

1、安装i18语言包

npm install vue-i18n

2、新建文件夹locales, 创建中英文文件en.json && zh.json

// 中文文件
{"title": "这是一个标题","langTxt": "English"
}// 英文文件
{"title": "This is title","langTxt": "中文"
}

3、main.ts引入

import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import zh from './locales/zh.json'const i18n = createI18n({locale: 'en',fallbackLocale: 'zh',messages: {en: en,zh: zh}
})
const app = createApp(App)
app.use(i18n)
app.mount('#app')

4、使用: $t(‘txtName’)

    <el-header>{{ $t('title') }}<el-button @click="changeLang" type="primary">{{ $t('langTxt') }}</el-button></el-header><script setup lang="ts">
// 实现中英文切换
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const changeLang = () => {console.log(locale)locale.value = locale.value === 'en' ? 'zh' : 'en'
}
</script>