NUXT中使用 nuxtjs/i18n

第一步：向项目添加依赖项

yarn add @nuxtjs/i18n
//--或
npm install @nuxtjs/i18n

第二步：配置语言文件

1.新建 lang 文件夹（名字取自己喜欢的）；
2.配置对应的语言文件

// en-US.js
export default {
 welcome: 'Welcome'
}
// zh-CN.js
export default {
 welcome: '欢迎'
}

第三步：plugins下新建i18n.js

import en from '../lang/en-US.js' //英语 - 美国
import fr from '../lang/fr-FR.js' //法语
import ja from '../lang/ja-JA.js' //日语
import es from '../lang/es-ES.js' //西班牙
import de from '../lang/de-DE.js' //德语
import zh from '../lang/zh-CN.js' //中文

export default {
    defaultLocale: 'en',
    // 根据项目情况，酌情配置
    locales: [
        {
            code: 'en',
            iso: 'en-US',
            name: 'English'
        },
        {
            code: 'fr',
            iso: 'fr-FR',
            name: 'Français'
        },
        {
            code: 'ja',
            iso: 'ja-JA',
            name: 'わぶん'
        },
        {
            code: 'es',
            iso: 'es-ES',
            name: 'Español'
        },
        {
            code: 'de',
            iso: 'de-DE',
            name: 'Deutsch'
        },
        {
            code: 'zh',
            iso: 'zh-CN',
            name: '中文'
        }
    ],
    vueI18n: {
        fallbackLocale: 'en',
        messages: { de, en, es, fr, ja, zh }
    }
}

第四步：修改 nuxt.config.js

1. 在nuxt.config.js中 modules 模块下添加 ‘@nuxtjs/i18n’；
2. 引入 import i18n from “./plugins/i18n”

 import i18n from "./plugins/i18n"
//第一种方式 - 
{
  modules: [
    [
      '@nuxtjs/i18n',
    ]
  ],
  i18n
}
//第二种方式
{
  modules: [
    [
      '@nuxtjs/i18n',
       i18n
    ]
  ],
}

使用/切换

{{ $t('welcome') }}
//------------
{{ $t('welcome.name1') }}
{{ $t('welcome.name2') }}

<nuxt-link :to="switchLocalePath('fr')">Français</nuxt-link>

最后

以上就是nuxtjs/i18n的简单使用，更复杂的使用和特性请参考官方文档。

Over~