Vue-i18n

官方地址

此文主要介绍vue3中使用vue-i18n

1. 安装vue-i18n

npm install vue-i18n

2. 创建lang.js文件

//引入i18n
import { createI18n } from "vue-i18n";
const messages = {
  zh: {
      hello: "你好",
      car: "car | cars",
      book:"book | books | booksss",
      apple: "no apples | one apple| two apple| three apple | {count} apples",
  },
  en: {
      hello: "hello",
      car: "car | cars | carssss",
      book:"book | books | booksss",
      apple: "no apples | one apple| two apple| three apple | {count} apples",
  },
};


//创建i18n对象
const i18n = createI18n({
  locale: localStorage.getItem("lang") || "zh", //默认显示的语言
  fallbackLocale: localStorage.getItem("lang") || "zh", //预设语言环境
  globalInjection: true, //全局生效$t
  legacy: false,
  messages
});

export default i18n;

3. 在main.js中引入i18n app.use(i18n)

import { createApp } from 'vue'
import App from './App.vue'

import i18n from "./lang/index"

const app = createApp(App)
app.use(i18n)
app.mount('#app')

4. 例子

<template>
    <div class="content">
        <div>hello：{{ t("hello") }}</div>
    </div>
    <div class="content">
        <div>car：{{ t("car") }}</div>
        <div>0car：:{{ t("car", 0) }}</div>
        <div>1car：{{ t("car", 1) }}</div>
        <div>2car：{{ t("car", 2) }}</div>
        <div>3car：{{ t("car", 3) }}</div>
    </div>
    <div class="content">
        <div>book：{{ t("book") }}</div>
        <div>0book：:{{ t("book", 0) }}</div>
        <div>1book：{{ t("book", 1) }}</div>
        <div>2book：{{ t("book", 2) }}</div>
        <div>3book：{{ t("book", 3) }}</div>
    </div>
    <div class="content">
        <div>apple：{{ t("apple") }}</div>
        <div>0apple：{{ t("apple", 0) }}</div>
        <div>1apple：{{ t("apple", 1) }}</div>
        <div>2apple：{{ t("apple", 2, { count: 2 }) }}</div>
        <div>10apple：{{ t("apple", 10, { count: 10 }) }}</div>
    </div>
</template>
<script setup>

import { useI18n } from "vue-i18n";
const { t } = useI18n()
</script>


<style>
.content{
    border: 1px solid #000000;
    padding: 10px;
    width: 300px;
    div{
        margin-bottom: 5px;
    }
}

</style>

当值为复数时：

message:中间用|隔开

• 若是 car: "car | cars"，不传取第一个值，传0取第二个值，传1取第一个值，传2取第二个值
• 若是book:"book | books | booksss"，不传取第二个，传0取第一个，传1传第二个，传2取第三个，只要值大于等于2都取第三个
• 若是no apples | one apple| two apple| three apple | {count} apples，不传取第二个，传0取第一个，传1传第二个，传2取第三个，只要值大于等于2都取第三个