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>