i18n을 사용한vue 3 vite의 국제화

i18n을 사용한vue 3 vite의 국제화

현재 vue 3 vite 프로젝트를 "@intlify/vite-plugin-vue-i18n"로 국제화하려고 합니다.여기서 직면한 문제는 현재 모든 컴포넌트에 대해 t 변수를 Import하여 설정해야 한다는 것입니다.
컴포넌트 예시:

<template>
  t('translation')
</template>

<script>
import { useI18n } from 'vue-i18n'
export default {
  setup(){
    const {t} = useI18n();
    return {t}
  },
};
</script>

질문입니다만, 가능하다면 변수 t를 글로벌하게 하는 가장 좋은 방법은 무엇일까요?모든 컴포넌트에 수입하고 있기 때문에, 이 예나 도움은 찾을 수 없습니다.모든 도움에 감사 드립니다! :)참고를 위해 관련 파일을 보내드립니다.

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './src/locales/**')
    })
  ]
})

main.ts:

import i18n from './i18n';
const app = createApp(App);
app.use(i18n);
app.mount("#app");

i18n.disples:

import { createI18n } from 'vue-i18n'
import messages from '@intlify/vite-plugin-vue-i18n/messages'

export default createI18n({
  legacy: false,
  locale: 'no',
  messages
})

i18n 플러그인을 등록하는 방법app.use(i18n)세계적 기능을 하다$t모든 하위 구성 요소에 사용할 수 있습니다.

<template>
 {{$t('translation')}}
</template>

이 함수는 옵션 api에서도 사용할 수 있으며 다음과 같이 사용할 수 있습니다.

mounted(){
console.log(this.$t('translation'))

}

단, 추가해 주세요.globalInjection: true,i18n 설정을 다음과 같이 변경합니다.

import { createI18n } from 'vue-i18n'
import messages from '@intlify/vite-plugin-vue-i18n/messages'

export default createI18n({
  legacy: false,
  locale: 'no',
  globalInjection: true,
  messages
})

보너스:

내부의 게터를 보고 로케일을 변경하다App.vue다음으로 로케일을 설정합니다.

<script>

import { defineComponent, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";


export default defineComponent({
  name: "app",
  data() {
    return {};
  },

  setup() {
    const i18n = useI18n();
    const store = useStore();

    watch(()=>store.getters.currentLang,(newVal) => { //watch the getter

      i18n.locale.value = store.getters.currentLang;
    },{
      immediate:true
    });
  },
});
</script>

vue-i18n v9에서 글로벌 컴포저 인스턴스에 액세스하는 추가 예가 있습니다.

i18n.displaces

import { createI18n } from 'vue-i18n';
import en from './locales/en';
import fr from './locales/fr';

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
        en,
        fr,
    },
});

export default i18n;

main.discloss.main.discloss.

import i18n from './i18n.js';

...

app.use(i18n);

그런 다음 vue-router의 beforeEnter 후크 또는 vuex 등과 같은 파일로 인스턴스를 가져올 수 있습니다.

import i18n from '../i18n.js';

console.log('i18n', i18n.global);

// to change locale:
i18n.global.locale.value = 'en';

액세스 방법:i18n.global를 통해 반환되는 인스턴스와 동일합니다.useI18n()'vue-i18n' 패키지에서 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/66732739/internationalization-for-vue-3-vite-with-i18n