Nuxt i18n 模块使用教程

2026-01-19 10:39:30作者：咎岭娴Homer

1. 项目的目录结构及介绍

Nuxt i18n 模块的目录结构如下：

nuxt-i18n/
├── components/
│   ├── LocaleSwitcher.vue
│   └── ...
├── locales/
│   ├── en.json
│   ├── zh.json
│   └── ...
├── middleware/
│   ├── i18n.js
│   └── ...
├── plugins/
│   ├── i18n.js
│   └── ...
├── static/
│   └── ...
├── store/
│   ├── index.js
│   └── ...
├── nuxt.config.js
├── package.json
└── README.md

目录介绍

components/: 存放国际化相关的组件，如语言切换器等。
locales/: 存放不同语言的翻译文件，如 en.json 和 zh.json。
middleware/: 存放中间件文件，如 i18n.js 用于处理语言切换逻辑。
plugins/: 存放插件文件，如 i18n.js 用于配置国际化插件。
static/: 存放静态资源文件。
store/: 存放 Vuex 状态管理文件。
nuxt.config.js: Nuxt 项目的配置文件。
package.json: 项目的依赖管理文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

Nuxt i18n 模块的启动文件主要包括 nuxt.config.js 和 plugins/i18n.js。

`nuxt.config.js`

export default {
  modules: [
    'nuxt-i18n'
  ],
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: require('./locales/en.json'),
        zh: require('./locales/zh.json')
      }
    }
  }
}

`plugins/i18n.js`

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      en: require('../locales/en.json'),
      zh: require('../locales/zh.json')
    }
  })
}