Vue-i18n
#Vue-i18n #Vue
安装
- @intlify/vite-plugin-vue-i18n
- vue-i18n
配置
main.js
import message from '@intlify/vite-plugin-vue-i18n/messages'
const i18n = createI18n({
locale:navigator.language || 'en-US'
messages
})
locales/en-US.json
/ locales/zh-CN.json
{
"language":"Language"
}
使用
App.vue
<i18n>
{
"en-US":{
"hello":"Hello World!"
},
"zh-CN":{
"hello":"你好 世界!"
}
}
</i18n>
<script setup>
import {useI18n} from 'vue-i18n'
const {locale,t} = useI18n({
inheritLocale:true
})
</script>
<template>
<HelloWorld :msg="`${t('language')}: ${t('hello')}`" />
</template>
HelloWorld.vue
<script setup lang="ts">
defineProps<{ msg: string }>()
</script>
<template>
<h1>{{ msg }}</h1>
</template>