翻译疑难杂症：解锁 Vue 国际化的秘密

1. 安装和配置

• 安装 vue-i18n 插件：npm install vue-i18n
• 在 main.js 文件中配置插件：

import Vue from "vue"
import VueI18n from "vue-i18n"
import { messages } from "@/locales"

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: "en",
  fallbackLocale: "en",
  messages
})

export default i18n

2. 翻译字符串

• 创建一个翻译文件，如 en.json：

{
  "home": "Home",
  "about": "About"
}

• 在组件中使用 $t() 方法翻译字符串：

<template>
  <h1>{{ $t("home") }}</h1>
</template>

<script>
export default {
  methods: {
    // ...
  }
}
</script>

3. 动态更改语言

• 响应用户的语言偏好：

mounted() {
  const lang = this.$i18n.locale
  if (lang !== this.$root.preferredLang) {
    this.$i18n.locale = this.$root.preferredLang
  }
}

• 使用 setLocale() 方法手动切换语言：

this.$i18n.setLocale("fr")

4. 翻译对象和数组

• 翻译对象：

<template>
  <span>{{ $t("person.name") }}</span>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: "John Doe",
        age: 30
      }
    }
  }
}

• 翻译数组：

<template>
  <ul>
    <li v-for="item in $t("fruits")">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fruits: ["Apple", "Banana", "Orange"]
    }
  }
}

5. 插值和格式化

• 使用插值：

<template>
  <p>{{ $t("message", { name: "Jane" }) }}</p>
</template>

<script>
export default {
  data() {
    return {
      name: "Jane"
    }
  }
}

• 使用格式化函数：

<template>
  <span>{{ $t("currency", { value: 1000, currency: "USD" }) }}</span>
</template>

<script>
export default {
  data() {
    return {
      value: 1000,
      currency: "USD"
    }
  },
  filters: {
    currency(value, currency) {
      return `${currency} ${value}`
    }
  }
}

通过遵循这些指南，您可以解锁 Vue 国际化的强大功能，创建无缝多语言应用程序。