@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状态实现国际化
- 安装依赖：@nuxtjs/i18n 和 Pinia（或Vuex）作为状态管理工具
npm install @nuxtjs/i18n pinia
- 配置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 /
- 配置语言文件
// en.json{"welcome":"Welcome","button":{"submit":"Submit"}}// zh.json{"welcome":"欢迎","button":{"submit":"提交"}}- 创建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)}}}})- 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>- 组件应用
<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 配置未禁用路由生成（默认启用）
