1、下载依赖
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 'i18n>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 'i18n>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
import 又或者可以这样写
const en = {language: { //示例zh: 'Chinese',en: 'English',},
}
// 当前目录下所有 js 文件
const ctx:any = import.meta.globEager('./*.js')
for (const file in ctx) {en[file.replace(/^\.\/(\w+)\.js$/, '$1')] = ctx[file].default
}
export default en
