vue3.0 + vue-i18n：使用方法和自动引入多个语言文件

1、下载依赖

npm install vue-i18n --save

2、看文件结构：

en、zh 中 index.ts 作用就是自动引入 文本文件，因为 vue3.0不支持 require，所以我们用 import 替换，方法如下：

// 批量引入英文文件
const modulesFilesEn:any = import.meta.glob("./*.js",{ eager: true })
const modulesEn:any = {};
for (const path in modulesFilesEn) {const moduleName: any = path.replace(/(.*\/)*([^.]+).*/gi, "$2")modulesEn[moduleName] = modulesFilesEn[path].default
}
export default modulesEn

// 批量引入中文
const modulesFilesZhCN:any = import.meta.glob("./*.js",{ eager: true })
const modulesZhCN:any = {};
for (const path in modulesFilesZhCN) {const moduleName = path.replace(/(.*\/)*([^.]+).*/gi, "$2")modulesZhCN[moduleName] = modulesFilesZhCN[path].default;
}
export default modulesZhCN

最终在 index.ts 中

import { createI18n } from 'vue-i18n';
import zh from './zh'
import en from './en'
import settings from '../settings'
const i18n = createI18n({locale: 'zh_CN', // 本地持久化时的 localStorage key  英文-en// fallbackLocale: 'zh_CN', //没有英文的时候默认中文语言messages: {zh_CN: zh,	//引入语言文件en: en}
})
export default i18n

main.ts中

import i18n from './i18n/index'
app.use(i18n)

文件中使用

<span class="title">{{ $t('component.title') }}</span>

或者

<span class="title">{{ t('component.title') }}</span>import { useI18n } from 'vue-i18n';
const { t } = useI18n();

require用法

const en = {}
// 当前目录下所有 js 文件
const ctx = require.context('./', true, /.js$/)
ctx.keys().forEach(file => (en[file.replace(/^\.\/(\w+)\.js$/, '$1')] = ctx(file).default))
export default en