Vue - 在设置脚本中使用 i18n

Question

我需要找到一种在我的项目的设置脚本中使用$tof的方法i18nvue

\n

我的 i18n 文件如下所示：

\n

import { createI18n } from 'vue-i18n'\nimport en from './en';\nimport es from './es';\n\nconst messages = { en, es };\n\nconst locales = [\n  { code: 'en', name: 'English' },\n  { code: 'es', name: 'Espa\xc3\xb1ol' }\n];\n\nconst i18n = createI18n({\n  locales: locales,\n  defaultLocale: 'en',\n  fallbackLocale: 'en',\n  messages,\n  silentTranslationWarn: true,\n  silentFallbackWarn: true,\n})\n\nexport default i18n\n

\n

我的主要js看起来像这样：

\n

import i18n from './lang/settings'\nconst application = createApp({ \n            render: () => h(app, props) \n        })\napplication.use(i18n)\n

\n

我可以完美地$t()在模板中使用来翻译，但我不知道如何在其中访问相同的方法<script setup></script>

\n

Answer 1

i18n 资源和相关文件需要按照您在问题中提到的方式放置。

您可以通过这种方式使用它，为了更好地理解，我已在 main.ts 中添加了所有内容。你可以这样使用它

主.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'en', // set locale
  messages: {
    en: {
    sample:{
      item1: 'hello world'
    }
  }} // set locale messages
});
createApp(App).use(router).use(i18n).mount('#app');

在你的组件中

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let name = t('sample.item1');
</script>
<template>
  {{name}}
</template>

Answer 2

对于 Vue-i18n版本 9

legacy: false创建实例时添加（main.js）

const i18n = VueI18n.createI18n({
  legacy: false, // you must set `false`, to use Composition API
  locale: 'ja',
  fallbackLocale: 'en',
  messages,
  // other options
})

并在您的脚本设置中

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n({ useScope: "global" });

// Something to do here ...

</script>

vue-i18n 文档