vite3ts使用i18n

1、安装

$ npm i vue-i18n@next -D

2、初始化

+ -- /src/locales
+ -- -- /locales/lang/
+ -- -- -- /lang/zh_CN.ts
+ -- -- -- /lang/en_US.ts
+ -- -- i18n.ts
+ -- -- index.ts

+ -- /utils/service.ts -> getLangFiles fn

3、详细

main.ts
import i18n from './locales/i18n'

app.use(i18n)

+ -- -- i18n.ts
import { createI18n } from 'vue-i18n' // 引入vue-i18n组件
import { getLangFiles } from '@/utils/service'

const modules = import.meta.glob('./lang/*', { eager: true })
const viewModules = import.meta.glob('../views/**/lang/[[:lower:]][[:lower:]]_[[:upper:]][[:upper:]].ts', { eager: true })

function getLangAll(): any {
  let a = getLangFiles(modules)
  let b = getLangFiles(viewModules)
  let c: any = {}
  for (let lang in a) {
    c[lang] = Object.assign(a[lang], b[lang])
  }
  return c
}

// 实例化I18n
const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: 'zh_CN', // 初始化配置语言
  messages: getLangAll()
})

export default i18n

+ -- -- index.ts
import i18n from './i18n'

// @ts-ignore 
export default i18n.global.t

该操作是将 t 暴露出去给 ts 文件使用，因为使用了动态引入的方法，所以 i18n.global.t 校验报错，可以使用， 使用 @ts 取消校验

import t from '@/locales'

t('key')

+ -- /utils/service.ts

/**
 * 获取对应语言文件
 * @param {Object} mList
 */
export const getLangFiles = (mList:any) => {
  let msg: any = {}
  for (let path in mList) {
    if (mList[path].default) {
      let pathName = path.slice(path.lastIndexOf('/') + 1, -3)
      let nowDat: any = {}
      if (path.indexOf('views') != -1) {
        let str = path.slice(path.indexOf('views/') + 6, path.indexOf('/lang'))
        nowDat[str] = mList[path].default
      } else {
        nowDat = mList[path].default
      }
      if (msg[pathName]) {
        msg[pathName] = {
          ...mList[pathName],
          ...nowDat
        }
      } else {
        msg[pathName] = nowDat
      }
    }
  }
  return msg
}

4、与 antd 的耦合使用

+ App.vue
import i18n from '@/locales/i18n'

const { locale } = i18n.global
const lang = reactive({
  zh_CN: {
    dayjs: 'zh-cn',
    antd: zh_CN
  },
  en_US: {
    dayjs: 'en',
    antd: en_US
  }
})

const initLang = computed(() => lang[layoutS.lang])

locale.value = layoutS.lang
watch(
  () => layoutS.lang,
  (newV: any) => {
    console.log('---------lang---------')
    console.log(newV)
    console.log('----------------------')
    locale.value = newV
    dayjs.locale(initLang.value.dayjs)
  },
  {
    immediate: true
  }
)

5、注意

• 如果是在 html 中使用，直接使用 $t() 可以实现动态切换语言的操作，如何是在 ts 中使用，则需要刷新页面，重新加载对应的 ts 文件

• 对应的语言做替换，

  • - home = '首页' -> home = 'zh.home'
    - {{ home }} -> {{ $t(home) }} / {{ $t( `${ home }` ) }}