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;
    

      

vue3 ElementPlus i18n国际化

上一篇:农夫约的假期


下一篇:马哈鱼数据血缘关系分析工具用户功能介绍