Question

我尝试使用nuxti18n，尽管有一些示例，似乎都不起作用。我可以更改语言，但无法翻译。

文档：https://nuxt-community.github.io/nuxt-i18n/

所有被评论的东西都是已经尝试过的

Components / Header.vue

<nuxt-link :to="switchLocalePath('pt')">pt</nuxt-link>
<nuxt-link :to="switchLocalePath('en')">en</nuxt-link>
<nuxt-link :to="switchLocalePath('de')">de</nuxt-link>
<nuxt-link :to="switchLocalePath('fr')">fr</nuxt-link>

nuxt.config.js

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
      '@nuxtjs/auth',
    'bootstrap-vue/nuxt',
    ['nuxt-i18n', {
      locales: [
        //{ code: 'en', iso: 'en-US', langFile: 'en.json' },
        //{ code: 'en', iso: 'en-US', langFile: '~/locales/en.json' },
        //{ code: 'en', iso: 'en-US', langFile: './locales/en.json' },
        //{ code: 'en', iso: 'en-US', langFile: '../locales/en.json' },
        { code: 'en', iso: 'en-US', langFile: 'en.json' },
        { code: 'pt', iso: 'pt-PT', file: 'pt.json' },
        { code: 'de', iso: 'de-DE', file: 'de.json' },
        { code: 'fr', iso: 'ft-FR', langFile: 'fr.json' }
      ],
      langDir: 'locales/' //with and without
      /*vueI18n: {
        fallbackLocale: 'pt',
         messages: {
            //en: require('./locales/en.json'),
            //en: require('en.json'),
            //en: require('locales/en.json'),
            //en: require('./locales/en.json'),
            //en: require('~/locales/en.json'),
            //en: require('../locales/en.json'),
            en: require('~/locales/en.json'),
            fr: require('~/locales/fr.json'),
            de: require('~/locales/de.json'),
            pt: require('~/locales/pt.json')
         }*/
    }]

  ],

/locales/en.json

{
  "crm": {
    "entidades":{
      "editarEntidade":{

      }

    },
    "pesquisa": "Search",
    "pesquisar": "Search...",
    "sim": "Yes",
    "nao": "No",
    "nomeUtilizador": "User name",
    "nome": "Name",
    "email": "Email",
    "admin": "Admin",
    "acoes": "Actions",
    "porPagina": "Per Page",
    "confirmarEliminar": "Do you want to delete the user ",
    "cancelar":"Cancel",
    "confirmar": "Confirm"
  },
  "pt": "Portuguese",
  "en": "English",
  "fr": "French",
  "de": "Germam"
}

控制台警告（很多）

...
[vue-i18n] Cannot translate the value of keypath 'crm.pesquisa'. Use the value of keypath as default.
...

{{$$（'crm.cancelar'）}}希望取消，但显示crm.cancelar

感谢这个新手：）

Answer 1

它现在可以正常工作，但不知道为什么，我删除了注释，在语言环境中添加了名称，并添加了惰性：true

谢谢大家

Answer 2

official Doc 说：

<块引用>

file（使用 lazy 时需要） - 文件名。加载语言环境时将相对于 langDir 路径解析懒洋洋地发消息

Answer 3

最简单的方法是在与 assets、nuxt.config.js、pages、ets 相同的级别上创建目录“locales”。

然后将库导入模块

modules: [
   ///...

   'nuxt-i18n',
],

然后更好地设置我的密钥

modules: [...],
i18n: {
    locales: [...],
    defaultLocale: 'en',
},

在此之后添加一些字段，例如：

i18n: {
        locales: ['en', 'ru'], // list of langs
        defaultLocale: process.env.VUE_APP_I18N_LOCALE || 'en', // just for better experience
        langDir: '~/locales/', // here is languages directory
        locales: [ 
// here is files information ( if you have .json format, replace .js with .json
                { code: 'ru', iso: 'ru-RU', file: 'ru.js', },
                { code: 'en', iso: 'en-EN', file: 'en.js', },
            ],
            vueI18n: {
                fallbackLocale: process.env.VUE_APP_I18N_LOCALE || 'en',         
            }
        },

如何使用nuxt i18n？

3 个答案: