【前端开发】Nuxt.js 国际化插件 i18n 使用指南

@nuxtjs/i18n

• 官方文档：Nuxt I18n
• @nuxtjs/i18n 是 Nuxt 官方基于 vue-i18n （Vue.js 的通用国际化插件）封装的国际化（i18n）模块，用于为 Nuxt 应用提供多语言支持。它简化了多语言路由、语言切换、翻译管理等功能的实现。

核心功能

• 多语言路由：自动为不同语言生成路由（如/en/about和/zh/about）。
• 语言切换：内置语言切换组件或 API，支持动态切换语言。
• 翻译管理：支持 JSON 文件或异步加载翻译内容，兼容 Vue I18n。
• SEO 优化：自动处理语言标签（hreflang）和元信息，提升多语言 SEO。

安装插件

npm install --save @nuxtjs/i18n

版本兼容性

• Nuxt 2：需安装 vue-i18n 并手动集成，或使用 @nuxtjs/i18n 的旧版本（如 v7）
• Nuxt 3：官方推荐使用 @nuxtjs/i18n，直接通过 npm /npx nuxi@latest module add i18n 安装，无需额外配置 vue-i18n

使用示例

• 模板中翻译：

  <p>{{ $t('welcome') }}</p>

• 切换语言：

  this.$i18n.setLocale('zh')

结合Store状态实现国际化

1. 安装依赖：@nuxtjs/i18n 和 Pinia（或Vuex）作为状态管理工具

npm install @nuxtjs/i18n pinia

2. 配置Nuxt模块：在nuxt.config.ts中配置@nuxtjs/i18n模块

exportdefaultdefineNuxtConfig({modules:['@nuxtjs/i18n','@pinia/nuxt'],i18n:{locales:[{code:'en',iso:'en-US',file:'en.json'},{code:'zh',iso:'zh-CN',file:'zh.json'}],lazy:true,langDir:'locales/',defaultLocale:'en'}})

• code：语言代码（短格式），例如 ‘en’ 代表英语
• iso：ISO 标准语言代码，包含地区（如美式英语）
• file：对应的翻译文件路径
• lazy：启用懒加载模式，仅当访问对应语言时加载翻译文件
• defaultLocale：设置默认语言环境
• langDir：指定语言文件存放的目录路径
  —— 常规操作是在 根目录 创建 locales /
  —— 但在实际项目中 Nuxt3 + i18n9.3.0 报错，成功操作是在 根目录 创建 i8n / locales /

3. 配置语言文件

// en.json{"welcome":"Welcome","button":{"submit":"Submit"}}

// zh.json{"welcome":"欢迎","button":{"submit":"提交"}}

4. 创建Pinia Store：在stores/app.ts中创建状态管理

exportconstuseAppStore=defineStore('app',()=>{constlanguage=ref('zh')constsetLanguage=(lang:string)=>{language.value=langif(process.client){localStorage.setItem('language',lang)}}// 初始化constinit=()=>{if(process.client){// 恢复语言设置constsavedLanguage=localStorage.getItem('language')if(savedLanguage){setLanguage(savedLanguage)}}}})

5. app.vue入口文件初始化配置数据

<script setup lang="ts">import{useAppStore}from'~/stores/app'import{useI18n}from'vue-i18n'constappStore=useAppStore()const{locale}=useI18n()// 初始化appStoreappStore.init()// 同步appStore的语言到i18nlocale.value=appStore.language</script>

6. 组件应用

<template><!--多语言按钮--><el-dropdown @command="handleLanguageChange"><template #dropdown><el-dropdown-menu><el-dropdown-item:command="lang.code"v-for="lang in locales":key="lang.code">{{lang.name}}</el-dropdown-item></el-dropdown-menu></template></el-dropdown><div>{{$t('welcome')}}</div><div>{{$t('button.submit')}}</div></template><script setup lang="ts">import{useUserStore}from'~/stores/user'import{useAppStore}from'~/stores/app'import{ref,computed}from'vue'import{useI18n}from'vue-i18n'// StoreconstuserStore=useUserStore()constappStore=useAppStore()// i18nconst{locales,setLocale,locale,t}=useI18n()constswitchLocalePath=useSwitchLocalePath()// routerconstroute=useRoute()constrouter=useRouter()consthandleLanguageChange=(lang:string)=>{appStore.setLanguage(lang)// 更新appStore中的语言状态goTargetPath(lang)}constgoTargetPath=(lang:string)=>{// 使用 switchLocalePath 获取目标语言的路由，然后进行跳转consttargetPath=switchLocalePath(lang)router.push(targetPath)}onMounted(()=>{locale.value=appStore.language})</script>

• switchLocalePath 组合式函数

• 用于获取当前页面在指定语言下的路由路径，常用于实现语言切换功能
• ‌需通过 useSwitchLocalePath() 引入函数，并传入目标语言代码（如’en’或’zh’）以生成对应路径

• 注意事项

• 避免直接修改 locale 状态‌：应使用 switchLocalePath 或setLocale 方法切换语言，而非直接赋值locale
• 语言切换后路由不更新，原因是：未使用 switchLocalePath 方法更新路由。
• 确保 nuxt.config.js 中 i18n 配置未禁用路由生成（默认启用）