fuse-code/src/lang/index.ts

import { createI18n, I18n as BaseI18n } from 'vue-i18n'
import { App, WritableComputedRef } from 'vue'
import { localGetFactory, localSetFactory } from '@/utils/store'
import { paramsToStr, strToParams } from '@/utils/params'
import zh from './locales/zh.json'
import en from './locales/en.json'
import ja from './locales/ja.json'
import kr from './locales/ko.json'
// 语言支持
export enum langNameEum {
  zh = 'zh',
  en = 'en',
  ja = 'ja',
  kr = 'kr'
}

export const langNameDescs = {
  [langNameEum.zh]: '中文',
  [langNameEum.en]: 'English',
  [langNameEum.ja]: '日语',
  [langNameEum.kr]: '韩语'
}

export const deflangName = langNameEum.zh
export const langNames = [langNameEum.en, langNameEum.zh, langNameEum.ja, langNameEum.kr]

type I18n = BaseI18n & {
  global: {
    t: I18nGlobalTranslation
    changeLang(langName: langNameEum, reload?: boolean): void
    locale: WritableComputedRef<langNameEum>
  }
}

const localKey = 'lang'
const local = {
  get: localGetFactory(str => {
    const langs = Object.keys(langNameDescs)
    if (str) {
      return langs.includes(str) ? str : langNameEum.zh
    } else {
      const defLang = window?.navigator?.language || 'zh'
      const navLang = langs.find(lang =>
        new RegExp(`-?${lang}-?`).test(defLang)
      )
      return navLang || langNameEum.en
    }
  }),
  set: localSetFactory((lang: langNameEum) => lang)
}


const params = strToParams(location.search)
export const langKey = (params.lang || local.get(localKey)) as langNameEum
if (langKey !== local.get(localKey)) {
  local.set(localKey, langKey)
}


const i18n: I18n = createI18n({
  legacy: false,
  fallbackLocale: deflangName,
  availableLocales: langNames,
  locale: langKey,
  sync: true,
  silentTranslationWarn: true,
  missingWarn: false,
  silentFallbackWarn: true
}) as I18n


export const langs = {
  [langNameEum.en]: en,
  [langNameEum.zh]: zh,
  [langNameEum.ja]: ja,
  [langNameEum.kr]: kr,
}
export const lang = langs[langKey] as typeof zh

console.error(lang)
i18n.global.setLocaleMessage(langNameEum.zh, zh)
i18n.global.setLocaleMessage(langNameEum.en, en)
i18n.global.setLocaleMessage(langNameEum.ja, ja)
i18n.global.setLocaleMessage(langNameEum.kr, kr)
i18n.global.changeLang = (lang: langNameEum, reload = true) => {
  i18n.global.locale.value = lang
  local.set(localKey, lang)
  params.lang = lang
  if (reload) {
    location.search = paramsToStr(params)
  }
  // location.reload()
}

export const setupI18n = (app: App) => {
  window.$t = app.config.globalProperties.$t = i18n.global.t
  app.use(i18n)
}
export const changeLang = i18n.global.changeLang
export const ui18n = i18n.global
export const useI18n = () => ui18n