vue 3 vite 与 i18n 的国际化

Posted 2023-02-22

【中文标题】vue 3 vite 与 i18n 的国际化

【英文标题】：Internationalization for vue 3 vite with i18n

【发布时间】：2021-06-18 07:29:37

【问题描述】：

我目前正在尝试使用“@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/**')
    )
  ]
)

ma​​in.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
)

【参考方案1】：

使用 app.use(i18n) 注册的 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 中的 getter 来更改语言环境，然后设置语言环境：

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

【讨论】：

触发动作时如何更改语言环境？？

我发现你可以用$i18n.locale = 'es'例如改成西班牙语

是的，在选项 api 或模板中你可以这样做

【参考方案2】：

我有一个额外的例子来展示在 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 hook或者vuex等。

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

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

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

您可以通过i18n.global 访问它。它与通过 'vue-i18n' 包中的 useI18n() 返回的实例相同。