vue3多语言配置，文件批量处理

1.安装

yarn add vue-i18n@next

2.src新建文件夹

en/router/home.js

en/common.js

lang/index.js

// 批量引入英文
const modulesFilesEn = import.meta.globEager('./en/**/*.js')
const modulesEn = {}
for (const path in modulesFilesEn) {
  const moduleName = path.replace(/(.*\/)*([^.]+).*/gi, '$2')
  modulesEn[moduleName] = modulesFilesEn[path].default
}

// 批量引入中文
const modulesFilesZhCN = import.meta.globEager('./en/**/*.js')
const modulesZhCN  = {}
for (const path in modulesFilesZhCN) {
  const moduleName = path.replace(/(.*\/)*([^.]+).*/gi, '$2')
  modulesZhCN[moduleName] = modulesFilesZhCN[path].default
}

export default {
  en: modulesEn,
  zh_CN: modulesZhCN
}

 index.js

import { createI18n } from 'vue-i18n'
import messages from './lang'
const i18n = createI18n({
  locale: 'zh_CN',
  messages: messages
})

export default i18n

 .main.js

const app = createApp(App)
app.use(i18n)

 .vacode/settings.json

{
  "i18n-ally.localesPaths": ["src/locales/lang"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
  "i18n-ally.enabledParsers": ["js"],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.enabledFrameworks": ["vue", "react"],
}

3.使用

{{ $t('common.hello') }}

4.效果