nuxt3之国际化i18n

前言

大家好，我是你不会困，写代码就不会困，今天分享的是nuxt3之国际化i18n 国际化是在应用程序中实现多语言支持的重要方面之一。在处理国际化时，可以使用不同的方法来实现数据持久化和页面初始化的查询。其中一种常见的方法是使用 Pinia（一种 Vue.js 状态管理库）来处理数据持久化。

然而，当使用服务端渲染（SSR）时，可能会遇到一个问题，即在页面初始化时会出现闪屏的情况，给用户带来不良的体验。这个问题的原因是服务端渲染先渲染默认语言的页面，然后再根据用户选择的语言进行一次渲染，导致页面的闪烁。

看来很多文章，有一定的误导性，之前做国际化是通过pinia去做数据持久化，然后在页面初始化的时候进行查询，然后你会发现屏幕会闪一下，原因就是服务端渲染，先给你渲染默认的，这个时候如果你的语言不是默认的就会再渲染一次，页面表现就是闪屏，用户体验极其不好。

那怎么配置pinia呢？nuxt3 他不需要，没错，就是不需要，使用方法是很简单

为了解决这个问题，可以使用 Nuxt.js 3（Nuxt 3）和 @nuxtjs/i18n 模块来进行国际化的配置，而不再依赖 Pinia 进行数据持久化。

首先，需要安装相关的依赖，包括 vue-i18n 和 @nuxtjs/i18n：

yarn add vue-i18n 
yarn add @nuxtjs/i18n@next -D

然后，在 Nuxt 3 的配置文件 nuxt.config.ts 中添加 @nuxtjs/i18n 模块并进行相应的配置：

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',//添加模块到Nuxt项目的配置
  ],
  i18n: {
    strategy: 'prefix_and_default', // 添加路由前缀的方式
    locales: ['en', 'zh', 'ja'], // 配置语种
    defaultLocale: 'zh', // 默认语种
    vueI18n: './i18n.config.ts', // 通过vueI18n配置
  },

})

接下来，创建 vue-i18n 的配置文件 i18n.config.ts，用于配置语言和对应的翻译资源：

import en from './locales/en.json'
import zh from './locales/zh.json'
import ja from './locales/ja.json'

export default defineI18nConfig(() => ({
  legacy: false, // 是否兼容之前
  locale: 'zh', // 默认语言
  messages: {//对应的语言
    en,
    zh,
    ja,
  },
}))

在 locales 目录下创建对应的语言文件，例如 en.json 和 zh.json，并填写相应的翻译内容：

en.json配置：

{
  "welcome": "hello",
  "messages": "world!"
}

zh.json配置：

{
    "welcome": "你好",
    "messages": "我的世界!"
}

在页面中使用 useI18n 和 $t 方法来实现多语言切换和翻译：

<script setup lang="ts">
const {locale, setLocale} = useI18n()
onMounted(() => {
  console.log("locale--language", locale.value)
})

</script>

<template>
	<div>
        <v-btn @click="setLocale('en')">切换英文</v-btn>
        <v-btn @click="setLocale('zh')">切换中文</v-btn>
        <p>{{ $t('welcome') }}</p>
        <p>{{ $t('messages') }}</p>
    </div>
</template>

<style scoped>

</style>

文件目录结构，在项目的根目录下新建lacales文件，分别创建对应的json文件

这个是nuxt3他在cookies的数据持久化的key，在项目里面要用到排查，可以直接看这里

总结

通过以上配置和代码，你可以使用 Nuxt 3 和 @nuxtjs/i18n 模块来实现国际化功能，而不再需要 Pinia 进行数据持久化。在页面初始化时，不会出现闪屏现象，用户体验得到了改善。

请注意，这里提供的是使用 Nuxt 3 和 @nuxtjs/i18n 模块的示例配置，具体的实现可能因项目需为了解决服务端渲染（SSR）下的闪屏问题，可以使用 Nuxt.js 3（Nuxt 3）和 @nuxtjs/i18n 模块来进行国际化的配置，而不再依赖 Pinia 进行数据持久化。