当前位置：首页 > article >正文

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

article 2024/10/21 3:33:46

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

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

查看全文

http://www.kler.cn/news/358178.html