vue3项目中使用i18n国际化

官网文档地址

Vue I18n vue-i18n.intlify.dev/guide/insta…

VUE3 项目安装 vue-i18n

install vue-i18n@9

项目中使用

新建 i18n 文件

lang/index.js

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  locale: "zh", // set current locale
  messages: {
    en: {
      hello: "hello!"
    },
    zh: {
      hello: "你好！"
    }
  }
})

export default i18n

在 main.js 入口文件中引入 i18n

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import i18n from "@/lang"


const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')

设置i18n字典

切换多语言

字段使用

在 template 直接使用 $t 即可

<template>
	{{$t("hello")}}
</template>