终于可以理解了vue-i18n了

领导说咱们的项目要加上多语言功能 额... 我的第一想法参考vue-admin-xx模板。然后看他们都在使用vue-i18n 那就可以把我最擅长复制粘贴的本事拿出来了

1.pnpm i vue-i18n

2.src下新建locales文件夹及内部在建一个lang文件夹

3.编写简易的语言转化配置

//src/locales/lang/en_US.ts
export default {
    hello: "hello",
    login: "login"
}
//src/locales/lang/zh_CN.ts
export default  {
    hello: "你好",
    login: "登录"
}

4.封装vue-i18n ps:这里参考了vue-ben组件

//src/locales/index.ts
import { createI18n, useI18n } from 'vue-i18n'
import type { I18n, I18nOptions } from 'vue-i18n'
import type { App } from 'vue'
//实例化的i18n
export let i18n: any;
let defaultLang = 'zh_CN'
const createI18nOptions = async (): Promise<I18nOptions> => {
    const modules =  import.meta.glob('@/locales/lang/*.ts', { eager: true });
    let messages: any = {};
    for (let key in modules) {
        let _key = key.replace("/src/locales/lang/", '').replace('.ts', '');
        messages[_key] = (modules[key] as any).default ?? {}
    }
    return {
        legacy: false,
        locale: defaultLang,
        fallbackLocale: defaultLang,
        messages: messages,
        sync: true,
        silentTranslationWarn: true,
        missingWarn: false,
        silentFallbackWarn: true
    }
}
//use方法
export const setupI18n = async (app: App) => {
    const options = await createI18nOptions()
    i18n = createI18n(options) as I18n
    app.use(i18n)
}
//导出$t方便在脚本中使用
export function $t(key: string): string {
    return i18n.global.t(key)
}

5.注册组件

import { setupI18n } from '@/locales/index'
const app = createApp(App)
await setupI18n(app);

6.多语言的使用

<script setup lang="ts">
import { ref } from 'vue';
import { i18n,$t} from '@/locales/index'

const handleClick = () => {
   msg.value = "login"
  //  msg.value = $t("login") 该方法修改的话 在修改语言时 不随之变化
}
const handleChangeLang = (value:string) => {
  i18n.global.locale.value = value
}
let msg = ref<string>('1212')
</script>

<template>
  <button @click="handleClick">setvalue</button>
  <button @click="handleChangeLang('zh_CN')">中文</button>
  <button @click="handleChangeLang('en_US')">英文</button>
  <h1 class="name">
    {{ $t("hello") }}
  </h1>
  <div>{{ $t(msg) }}</div>
</template>