使用 Intlayer 翻译您的 Nuxt 和 Vue 网站 | 国际化 (i18n)

<script setup lang="ts">import { ref } from "vue";import { useIntlayer } from "vue-intlayer";defineProps({  msg: String, // 消息属性});const {  count,  edit,  checkOut,  nuxtIntlayer,  learnMore,  nuxtDocs,  readTheDocs,} = useIntlayer("helloworld"); // 使用名为 "helloworld" 的内容字典const countRef = ref(0); // 计数引用</script><template>  <h1>{{ msg }}</h1>  <div class="card">    <button type="button" @click="countRef++">      <count />      {{ countRef }}    </button>    <p v-html="edit"></p>  </div>  <p>    <checkOut />    <a href="https://nuxt.com/docs/getting-started/introduction" target="_blank"      >Nuxt</a    >，<nuxtIntlayer />  </p>  <p>    <learnMore />    <a href="https://nuxt.com" target="_blank"><nuxtDocs /></a>。  </p>  <p class="read-the-docs"><readTheDocs /></p>  <p class="read-the-docs">{{ readTheDocs }}</p></template>

<script setup lang="ts">import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Nuxt 自动导入 useRouteconst route = useRoute();const { locale, availableLocales, setLocale } = useLocale();</script><template>  <nav class="locale-switcher">    <NuxtLink      v-for="localeEl in availableLocales"      :key="localeEl"      :to="getLocalizedUrl(route.fullPath, localeEl)"      class="locale-link"      :class="{ 'active-locale': localeEl === locale }"      @click="setLocale(localeEl)"    >      {{ getLocaleName(localeEl) }}    </NuxtLink>  </nav></template>

<template>  <NuxtLayout>    <NuxtPage />  </NuxtLayout></template>

<script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">首页</Links>    <Links href="/about">关于</Links>  </div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("home-page");useHead({  title: content.metaTitle.value,  meta: [    {      name: "description",      content: content.metaDescription.value,    },  ],});</script><template>  <h1><content.title /></h1></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // 使用 .raw 访问原始字符串  meta: [    {      name: "description",      content: content.metaDescription.raw, // 使用 .raw 访问原始字符串    },  ],});</script><template>  <h1><content.title /></h1></template>

<script setup lang="ts">import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";interface Props {  href: string;  locale?: string;}const props = defineProps<Props>();const { locale: currentLocale } = useLocale();// 计算最终路径const finalPath = computed(() => {  // 1. 检查链接是否为外部链接  const isExternal = /^https?:\/\//.test(props.href || "");  // 2. 如果是外部链接，原样返回（NuxtLink 负责生成 <a> 标签）  if (isExternal) return props.href;  // 3. 如果是内部链接，则本地化 URL  const targetLocale = props.locale || currentLocale.value;  return getLocalizedUrl(props.href, targetLocale);});</script><template>  <NuxtLink :to="finalPath" v-bind="$attrs">    <slot />  </NuxtLink></template>

<script setup lang="ts">import Links from "~/components/Links.vue";import LocaleSwitcher from "~/components/LocaleSwitcher.vue";</script><template>  <div>    <header>      <LocaleSwitcher />    </header>    <main>      <slot />    </main>    <Links href="/">首页</Links>    <Links href="/about">关于</Links>  </div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";// useHead 在 Nuxt 中自动导入const content = useIntlayer("about-page");useHead({  title: content.metaTitle.raw, // 使用 .raw 获取原始字符串  meta: [    {      name: "description",      content: content.metaDescription.raw, // 使用 .raw 获取原始字符串值    },  ],});</script><template>  <h1><content.title /></h1></template>