1. 程式人生 > 其它 >vue3 ElementPlus i18n國際化

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;