如何在Vue中结合createI18n使用JSON翻译文件

我有一个Vue项目，其main.js代码如下：

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

请问如何修改这段代码，让messages对象使用locale文件夹中的JSON翻译文件？我在locale文件夹中有en-US.json、fr-FR.json等翻译文件，希望替代messages对象内的硬编码翻译内容，是否可行？

当然可行！这是Vue I18n推荐的最佳实践之一，能让翻译内容和业务代码解耦，后续维护多语言会高效很多。下面是具体的修改步骤：

1. 确认文件结构与JSON格式 #

首先确保你的locale文件夹结构符合预期（建议放在src目录下）：

src/
├── locale/
│   ├── en-US.json
│   └── fr-FR.json
├── main.js
└── ...

每个JSON文件的结构要和你之前硬编码的messages结构完全匹配，比如en-US.json内容应该是：

{
  "sample": {
    "item1": "hello world"
  }
}

fr-FR.json可以对应写成：

{
  "sample": {
    "item1": "Bonjour le monde"
  }
}

2. 静态导入翻译文件（基础方案） #

直接通过静态导入的方式引入JSON文件，替换原来硬编码的messages配置：

import { createI18n } from "vue-i18n";
import { createApp } from 'vue'
import './styles/main.scss'
import App from './App.vue'
// 导入对应语言的翻译文件
import enUS from './locale/en-US.json'
import frFR from './locale/fr-FR.json'

const i18n = createI18n({
  locale: 'en-US', // 修改为你的默认语言标识，要和JSON文件名对应
  fallbackLocale: 'en-US',   
  legacy: false,
  globalInjection: true,
  messages: {
    'en-US': enUS,
    'fr-FR': frFR
  } // 用导入的JSON文件替代硬编码内容
});

const app = createApp(App)

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

3. 可选：动态导入（按需加载优化） #

如果项目支持的语言较多，不想一次性加载所有翻译文件，可以用动态导入实现按需加载，优化首屏性能：

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

const i18n = createI18n({
  locale: 'en-US',
  fallbackLocale: 'en-US',   
  legacy: false,
  globalInjection: true,
  messages: {}, // 初始为空
  // 配置动态加载逻辑
  async setupI18n({ locale }) {
    // 根据locale动态加载对应翻译文件
    const messages = await import(`./locale/${locale}.json`)
    i18n.global.setLocaleMessage(locale, messages.default)
    return Promise.resolve()
  }
});

// 初始化默认语言包
i18n.setupI18n({ locale: 'en-US' })

const app = createApp(App)
app.use(i18n)
app.mount('#app')

注意事项 #

• 确保JSON文件语法正确，不要有多余逗号或格式错误，否则会导致导入失败。
• locale的标识要和JSON文件名严格对应（比如en-US对应en-US.json），避免匹配出错。
• 如果之前业务代码里用的是en这类短标识，可以在配置里做映射（比如把en指向en-US的翻译内容），或者统一修改为完整标识，保持一致性。

内容的提问来源于stack exchange，提问作者mcool