文档

为 Nuxt 项目提供的 I18n（国际化）模块，由 Vue I18n 驱动。

yarn add @nuxtjs/i18n  //^10.2.0"  10.2.1
// npx nuxi@latest module add @nuxtjs/i18n

1. nuxt.config.ts 配置
export default defineNuxtConfig({
  modules: [ '@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'zh',
    strategy: 'no_prefix',
    locales: [
      { code: 'en', name: 'English', file: 'en.json' },
      { code: 'zh', name: 'Chinese', file: 'zh.json' }
    ]
  },
})

2. locale 文件
Nuxt I18n 默认从一个（可配置的）目录结构中加载 locale 文件，默认应在 <rootDir>/i18n/locales 下创建这些 locale 文件。
 i18n/locales/en.json
{
  "welcome": "Welcome",
  "question": {
    "responsive": "Responsive",
    "contact": "Contact"
  }
}

3. 前端使用
<h1>{{ $t('welcome') }}</h1>
{{ $t('question.responsive') }}
:placeholder="$t('placeholder')"
<script setup> 
  $t('welcome') 
</script>

4. 切换语言
const { locales, setLocale } = useI18n()
<div>
  <button v-for="locale in locales" @click="setLocale(locale.code)">
    {{ locale.name }}
  </button>
  <h1>{{ $t('welcome') }}</h1>
</div>

// script中写法
await setLocale("zh") 
//刷新页面
window.location.reload()   

// 注：Nuxt I18n已做持久化了，无需多余操作
if(process.client){
  const DEFAULT_LANG = navigator.language
  console.log(126, "DEFAULT_LANG", DEFAULT_LANG)  // en-US  zh-CN
}