i18n的简单使用

• 文档

地址：vue-i18n.intlify.dev/guide/insta…

• 安装

npm install vue-i18n@9

• 使用

定义一个i18n.js

import { createI18n } from 'vue-i18n'

const messages = {
  zh: {
    message: {
      hello: '你好、世界'
    }
  },
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

const i18n = createI18n({
  legacy: false, // 启用 Composition API
  locale: 'zh', // 设置对应的语言类， 如 'en', 'zh', 'ja'
  fallbackLocale: 'en', // set fallback locale
  messages // set locale messages
  // something vue-i18n options here ...
})

export default i18n

main.js中注册

import i18n from '@/i18n.js'
app.use(i18n)

index.vue使用

<script setup lang="ts">
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';

// 在方法中使用
const { t } = useI18n() 

const onClick = () => {
  console.log(t('message.hello'))
	return t('message.hello')
}
</script>

<template>
  <div>
  	// 直接使用
    <p>{{ $t('message.hello') }}</p>
  	// v-t指令获取(vue-i18n自带)
		<p v-t="'message.hello'"></p>
    <p @click="onClick">获取message.hello属性</p>
  </div>
</template>

• 效果图