Nuxt3.7.1版本引入@nuxtjs/i18n 实现国际化

小半 • 2024年3月2日下午6:03 • 前端开发 • 阅读 301

Nuxt3.7.1版本引入@nuxtjs/i18n 实现国际化

首先也是要去安装

# Using npm
npm install @nuxtjs/i18n@next --save-dev

# Using yarn
yarn add --dev @nuxtjs/i18n@next

# Using pnpm
pnpm install --shamefully-hoist -D @nuxtjs/i18n@next

配置nuxt-config.ts

export default defineNuxtConfig({
    modules: [
       '@nuxtjs/i18n',
    ],
})

配置i18n

export default defineNuxtConfig({
    modules: [
       '@nuxtjs/i18n',
    ],
     i18n:{
        locales: [
            { code: "zh", name: "🇨🇳中文", file: "zh.json" },
            { code: "en",  name: "🇬🇧 English", file: "en.json" },//语言名称和文件夹名字
        ],
        detectBrowserLanguage: false,//是否要自动检测用户浏览器的语言设置
        defaultLocale:'zh',//默认语言
        langDir:"locales/" //语言文件夹，放在根目录下面
    },
})

使用

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

const { locale, locales } = useI18n()
console.log(locale,locales)
const changeLang = (lang) => {
    locale.value = lang
}

</script>

<template>
<div>
    <form>
        <a-select v-model:value="locale">
            <a-select-option value="zh">zh</a-select-option>
            <a-select-option value="en">en</a-select-option>
        </a-select>

        <h1>{{ $t('welcome') }}</h1>
    </form>
    <a-button @click="changeLang('en')">切换语言</a-button>
</div>
</template>

<style scoped>

</style>

效果

Nuxt3.7.1版本引入@nuxtjs/i18n 实现国际化 — image.png

使用语言切换器

useSwitchLocalePath是一个可组合函数。调用该可组合函数会返回一个函数，该函数能够以另一种语言返回指向当前页面的链接。

这是一个示例语言切换器，其中name已将一个键添加到每个语言环境对象，以便为每个链接显示更友好的标题：

<template>
  ...
  <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">{{
    locale.name
  }}</NuxtLink>
  ...
</template>
<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const availableLocales = computed(() => {
  return (locales.value).filter(i => i.code !== locale.value)
})
</script>