Vue i18n의 로케일을 동적으로 변경할 수 없습니다

Question

내 애플리케이션을 다국어로 만들기 위해 vue-i18n 플러그인을 구현하려는 작은 vue 애플리케이션이 있습니다. vue cli에서 vue-i18n 플러그인을 설치했습니다. 두 개의 로케일이 있고 모든 것이 예상대로 작동합니다. .env 파일의 로케일을 원하는 언어로 수동으로 변경할 때마다 애플리케이션의 언어도 변경됩니다. 그러나 프런트엔드의 버튼을 사용하여 변경하려고 할 때마다 실패합니다.

이것은 내 i18n.js 파일의 내용입니다:

으아악

이 내용은 .env 파일에 있습니다.

으아악

이것은 제가 본 튜토리얼의 코드입니다. 그들은 this.$i18n.locale을 통해 로케일에 액세스합니다. 그러나 이것은 저에게는 작동하지 않습니다. 제가 구현하려고 시도한 방법은 다음과 같습니다.

으아악

버튼을 클릭할 때 발생하는 오류는 다음과 같습니다.

[Vue 경고]: 네이티브 이벤트 핸들러 실행 중 처리되지 않은 오류

Uncaught TypeError: 정의되지 않은 속성을 설정할 수 없습니다(set '로케일')

i18n.locale 및 this.$root.$i18n.locale과 같은 다른 솔루션을 시도했지만 둘 다 작동하지 않는 것 같습니다.

또한 로케일 폴더에 있는 JSON 파일의 메시지

{{ t("message") }}

에 액세스하려고 하면 다음 경고가 표시됩니다.

[intlify] 'nl' 로케일 메시지에서 'message' 키를 찾을 수 없습니다.

[intlify] "en" 로케일을 사용하여 "메시지" 키를 번역하는 대체

[intlify] 'en' 로케일 메시지에서 'Message' 키를 찾을 수 없습니다.

[intlify] "message" 키를 번역하기 위해 "nl" 로캘을 사용하는 대체

제 질문은 제가 어디에서 잘못하고 있는 건지, 로케일 폴더에서 JSON 파일에 액세스하려고 할 때 나타나는 경고를 제거할 수 있는 방법이 있느냐는 것입니다.

Answer 1

나는 콤보를 사용하고 있으므로 이것이 당신에게 효과가 있을지 100% 확신할 수는 없지만, 나에게는 이것이 효과가 있었습니다:

에서 변경됨

으아아아

to

으아아아

도움이 되길 바랍니다. :)