如何在从远程服务器获取语言偏好后初始化Vue-i18n？

要避免页面加载时的语言切换闪烁，核心是在Vue-i18n初始化前就拿到用户的偏好语言，而非先初始化再修改locale。可以通过改造Nuxt插件实现这个逻辑，具体步骤如下：

1. 改造i18n插件为异步插件 #

Nuxt允许插件返回Promise，我们可以在插件内部先完成语言获取逻辑，再创建并初始化i18n实例。

修改plugins/i18n.ts：

import { createI18n } from 'vue-i18n'

export default defineNuxtPlugin(async ({ vueApp, appConfig }) => {
  // 1. 优先从Cookie读取已存储的语言（避免重复请求）
  const localeCookie = useCookie('user-locale')
  let userLocale = localeCookie.value || 'en'

  // 2. 若Cookie无值，请求远程接口获取用户偏好语言
  if (!localeCookie.value) {
    try {
      // 用Nuxt的useFetch替代直接axios，适配SSR/CSR场景
      const { data: localeRes } = await useFetch(
        `${appConfig.api.baseUrl}/language/preferable`,
        { method: 'GET' }
      )
      
      if (localeRes.value?.data?.locale) {
        userLocale = localeRes.value.data.locale
        // 将语言存入Cookie，后续访问直接读取
        localeCookie.value = userLocale
      }
    } catch (error) {
      console.error('获取用户语言偏好失败:', error)
    }
  }

  // 3. 动态加载对应语言的翻译文件（假设翻译文件存放在locales目录下）
  const messages = await import(`../locales/${userLocale}.json`).then(m => m.default)

  // 4. 用获取到的语言初始化i18n
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: userLocale,
    fallbackLocale: 'en',
    messages: {
      [userLocale]: messages
      // 若需要预加载 fallback 语言，可添加：en: await import('../locales/en.json').then(m => m.default)
    }
  })

  vueApp.use(i18n)
})

2. 翻译文件结构示例 #

在项目根目录创建locales文件夹，存放各语言的翻译文件：

locales/
├── en.json
├── zh.json
└── ja.json

比如en.json内容：

{
  "welcome": "Welcome",
  "profile": "Profile"
}

3. 关键说明 #

• 异步插件执行时机：Nuxt会等待异步插件执行完成后再继续初始化应用，确保i18n实例用正确的语言创建，页面渲染时直接使用目标语言，避免闪烁。
• Cookie缓存：将用户语言存入Cookie，后续访问无需重复请求接口，提升性能。
• 动态加载翻译：只加载用户当前需要的语言文件，减少打包体积和加载时间。
• SSR适配：使用useFetch而非直接axios，确保在服务器端渲染时也能正确获取语言（需注意后端接口支持SSR场景的请求）。

4. 插件加载顺序 #

如果你的项目有其他依赖i18n的插件，建议给i18n插件文件名添加前缀（如01.i18n.ts），确保它优先执行。

内容的提问来源于stack exchange，提问作者makis83