vue3 ElementPlus i18n国际化

1. main.ts引入i18n

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import store from './store'
   
   import ElementPlus from "./plugins/ElementPlus";
   import common from "./plugins/common";
   
   import i18n from './language';
   
   createApp(App).use(store).use(router).use(ElementPlus).use(common).use(i18n).mount('#app');
         

2. 新建文件夹language, language文件夹下创建lang文件夹、index.ts,lang文件夹下创建语言类型文件
3. 自动引入文件类型文件

   /**
    * require.context
    * @param {directory}:表示检索的目录
    * @param {useSubdirectories}:表示是否检索子文件夹
    * @param {regExp}:匹配文件的正则表达式,一般是文件名
    * @param {mode}:加载模式，同步/异步
    */
   import { createI18n } from 'vue-i18n'
   
   const lang = require.context(`./lang`, false, /\.ts$/);
   
   const messages:any = {};
   lang.keys().forEach(key => {
       const val = lang(key).default;
       const name = key.replace(/(.*\/)*([^.]+).*/ig, '$2');
       messages[name] = val;
   });
   
   const i18n = createI18n({
       locale: navigator.language.toLowerCase(),    //默认显示的语言
       messages
   });
   
   export default i18n;
         

4. element-plus国际化

   <template>
      <el-config-provider :locale="locale">
        <router-view />
     </el-config-provider>
   </template>
   
   
    
   <script lang="ts">
   import { defineComponent, reactive, toRefs } from "vue";
   
   export default defineComponent({
     name: "App",
     setup() {
       const languageType = navigator.language.toLowerCase();
       const state = reactive({
         locale: require(`element-plus/lib/locale/lang/${languageType}`).default,
       });
   
       return {
         ...toRefs(state)
       }
     }
   })
   </script>
   <style lang="scss"></style>