如何在 Vue 中通过 createI18n 使用 JSON 文件

Question

如果我有一个带有 main.js 文件的 Vue 项目，如下所示：

import { createI18n } from "vue-i18n";
import { createApp } from 'vue'
import './styles/main.scss'
import App from './App.vue'

const i18n = createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',   
  legacy: false,
  globalInjection: true,
  messages: {
    en: {
    sample:{
      item1: 'hello world'
    }
  }} // set locale messages
});

const app = createApp(App)

app.use(i18n)
app.mount('#app')

我如何编辑它以便消息对象使用我的 JSON 翻译文件？基本上，我的locale 文件夹中有翻译文件，一些示例是en-US.json 和fr-FR.json。

因此，我不想直接在消息对象内对事务进行硬编码，而是想使用我的语言环境文件夹。这可能吗？

Answer 1

最好为翻译文件创建一个单独的文件夹，例如 - locales。在此文件夹中，您可以存储每种目标语言的 json 文件。

src/locales目录内容示例：

- index.js
- en.json
- fr.json
- uk.json

src/locales/index.js:

import en from "./en.json";
import fr from "./fr.json";
import uk from "./uk.json";

export const languages = {
  en: en,
  fr: fr,
  uk: uk,
};

src/main.js:

import { createI18n } from "vue-i18n";
import { createApp } from "vue";

import "./styles/main.scss";
import App from "./App.vue";

import { languages } from "@/locales";

const i18n = createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  legacy: false,
  globalInjection: true,
  messages: languages
});

const app = createApp(App);

app.use(i18n);
app.mount('#app');