ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue3 ElementPlus i18n国际化

2021-09-04 09:34:14  阅读:279  来源: 互联网

标签:lang use ElementPlus const 文件夹 vue3 i18n import


  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;
    

      

标签:lang,use,ElementPlus,const,文件夹,vue3,i18n,import
来源: https://www.cnblogs.com/MyCode1990/p/15225793.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有