vue3 + ant-design中vue-i18n配置及使用

1.目录结构

 2.初始化配置

1. lang/index.js 中引入vue-i18n

   import { createI18n } from 'vue-i18n';
   import TzConfig from '@/config/zConfig';
   import zhCN from 'ant-design-vue/es/locale/zh_CN'; // 中文
   import enGB from 'ant-design-vue/es/locale/en_GB'; // 英文
   import zhTW from 'ant-design-vue/es/locale/zh_TW'; // 繁体
   import enLocale from './en';
   import cnLocale from './cn';
   import twLocale from './tc';
   
   const messages = {
     en: {
       ...enLocale,
       ...enGB,
     },
     cn: {
       ...cnLocale,
       ...zhCN,
     },
     tc: {
       ...twLocale,
       ...zhTW,
     },
   };
   export function getLanguage() {
     const chooseLanguage = TzConfig.lang;
     if (chooseLanguage) {
       return chooseLanguage;
     }
   }
   const i18n = createI18n({
     locale: getLanguage(),
     globalInjection: true,
     messages,
   });
   
   export default i18n;

2. main.js直接引入我们的定义的语言包配置文件，不需要单独通过app.config.globalProperties做全局配置
    

   import { createApp } from 'vue';
   import App from './App.vue';
   import i18n from '@/lang';
   
   // 引入less
   import './assets/less/index.less';
   // 引入路由
   import router from './router';
   // 引入store
   import store from './store';
   
   let app = createApp(App);
   
   app
     .use(router)
     .use(store)
     .use(i18n)
     .mount('#app');
   

   至此，初始化语言包配置就可以了

3.具体使用

// 在标签中使用 通过 $t() 或者 t() 
<div>{{ $t('chinese') }}</div>


// 在js文件中使用类似
import i18n from '@/language'
i18n.global.t('chinese')

// 在vue页面setup中使用
import { useI18n } from 'vue-i18n';
setup() {
    const I18n = useI18n();
    onMounted(() => {
      console.log(I18n.t('chinese'));
    });
}

特别注意： 标签，js和setup中的使用方式不一样， js文件中不能用setup中的方式引用vue-i18n，useI18n方法是通过实例获取到绑定到全局的$t，如不慎引用会报如下错误。

4. 动态更改语言包

// js文件中，需引入自定义配置
import i18n from '@/lang';

// 修改语言包
i18n.global.locale = v;

// setup中修改
import { useI18n } from 'vue-i18n';

setup() {
    const { locale } = useI18n()
    // 通过locale.value切换
    const setLangCondition = (v) => {
        locale.value = v;
    }
    return {
        setLangCondition
    }
 },

end