1

Projeto

  • "vue": "^2.6.10",
  • "vue-i18n": "^8.15.3"

Estou configurando a internacionalização do projeto

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

import i18n from './lang'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Vue.config.productionTip = false


new Vue({
    router,
    store,
    render: h => h(App),
    i18n
}).$mount('#app')

Uso o eclipse na linha i18n Aparece um erro

Could not find a declaration file for module './lang'. 'c:/javas/workerspaceangular/xygradle/frontend/src/lang/
index.js' implicitly has an 'any' type.

Meu aquivo index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import pt from './locals/pt_BR'
import en from './locals/en_US'

Vue.use(VueI18n)

export default {
  locale: 'pt',
  fallbackLocale: ['pt'],
  messages: {
    pt: {
      lang: pt
    },
    en: {
      lang: en
    },
  }
}

Abaixo o log quando executa o comando npm run serve

C:\javas\workerspaceangular\xygradle\frontend>npm run serve

> [email protected] serve C:\javas\workerspaceangular\xygradle\frontend
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4420ms                                                                                                           14:44:53

Type checking in progress...

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.91:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ERROR in C:/javas/workerspaceangular/xygradle/frontend/src/main.ts(7,18):
7:18 Could not find a declaration file for module './lang'. 'C:/javas/workerspaceangular/xygradle/frontend/src/lang/index.js' implicitly has an 'any' typ
e.
     5 | import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
     6 | 
  >  7 | import i18n from './lang'
       |                  ^
     8 | 
     9 | import 'bootstrap/dist/css/bootstrap.css'
    10 | import 'bootstrap-vue/dist/bootstrap-vue.css'
ERROR in C:/javas/workerspaceangular/xygradle/frontend/src/main.ts(22,2):
22:2 No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object,
 object, object, Record<...>>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; render: (h: CreateElement) => VNode; i18n: any; }' is not assignable to parameter of type 'T
hisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
      Object literal may only specify known properties, and 'i18n' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, o
bject, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, objec
t, object, object, Record<...>>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; render: (h: CreateElement) => VNode; i18n: any; }' is not assignable to parameter of type 'T
hisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
      Object literal may only specify known properties, and 'i18n' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object,
object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record
<...>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; render: (h: CreateElement) => VNode; i18n: any; }' is not assignable to parameter of type 'C
omponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
      Object literal may only specify known properties, and 'i18n' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, D
efaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
    20 |        store,
    21 |        render: h => h(App),
  > 22 |        i18n
       |        ^
    23 | }).$mount('#app')
    24 | 
Version: typescript 3.8.3
Time: 4463ms

O projeto vai para o ar e funciona..! Preciso remover esse erro de compilação? e também quero mudar o nome dessa variável que chamada de $t

{{ $t('lang.buttons.secondary')}}

para se chamar i18N, assim acredito que fica mais simples

Resumo para ser tratado - Como resolver esse erro? - Como renomear a variável t para i18N

1 Resposta 1

2

Dá uma olhada aos exemplos do vue-i18n aqui. O que te está a faltar é criar uma instância do VueI18n e não somente exportar um objeto de configuração.

O teu index.js deve exportar esse singleton assim:

const i18nConfig =  {
  locale: 'pt',
  fallbackLocale: ['pt'],
  messages: {
    pt: {
      lang: pt
    },
    en: {
      lang: en
    },
  }
}

const i18n = new VueI18n(i18nConfig)

export default i18n

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .