Início / coding / Perguntas / 78681509
Accepted
Full-Stack Developer
Asked: 2024-06-28 16:52:30 +0800 CST

A mensagem de tradução não pode conter json stringificado

  • 772

Eu sou novo no nuxt. Eu instalei o i18n para lidar com traduções

eu verifiquei https://i18n.nuxtjs.org/docs/getting-started

meu defineI18nConfig:

nuxt-app/i18n.config.ts

export default defineI18nConfig(() => ({
    legacy: false,
    locale: 'en',
    fallbackLocale: "en",
    escapeParameterHtml: false,
    warnHtmlMessage: false,
    messages: {
        en: {

            welcome: "hello dear human {\"key\": \"value\"}"

        },
        fr: {

            welcome: "hello dear human fr"

        }
    },
}))

páginas/index.vue

<script setup>


const { locale, setLocale } = useI18n()
</script>
<template>
  <div>
    <div>
      <button class="btn ml-3" @click="setLocale('en')">en</button>
      <button class="btn ml-3" @click="setLocale('fr')">fr</button>
      <p>{{ $t('welcome') }}</p>
    </div>
  </div>
</template>

Erro:

Message compilation error: Invalid token in placeholder: '"key":'
1  |  hello dear human {"key": "value"}

Meu problema, tenho alguns exemplos json em minhas traduções que não consigo excluir

eu importei i18n na configuração,

modules: ["@nuxtjs/i18n"],

  i18n: {
    vueI18n: './i18n.config.ts'
  }

É possível ter json traduzido ou não?

nuxt.js

1 respostas

  1. Best Answer

    const i18n = VueI18n.createI18n({
  locale: 'en',
  messages: {
    en: {
      hello: `hello world {'{'}"key": "value"{'}'}`
    }
  }
})

const app = Vue.createApp()

app.use(i18n)
app.mount('#app')
    <script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>

<div id="app">
  {{ $t('hello') }}
</div>

    usar {'@'}para o espaço reservado

    veja vue-i18n Interpolação literal

    • 2

relate perguntas