3

我目前正在尝试使用“@intlify/vite-plugin-vue-i18n”将我的 vue 3 vite 项目国际化。我在这里面临的问题是，我目前必须为每个组件导入和设置 t 变量才能使用它。
示例组件：

<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.js：

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

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

2 回答 2

8

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
})

奖金 ：

通过观察内部的 getter 来更改语言环境，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>
于 2021-03-21T13:23:42.690 回答
1

我还有一个额外的例子来展示在 vue-i18n v9中访问全局作曲家实例：

i18n.js

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.js

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”包返回的实例相同。

于 2021-12-22T20:46:16.303 回答