zoukankan      html  css  js  c++  java
  • vite + vue3 + antd 实现国际化

    一引入 :

    因为vite支持的模块引入方式为es6的import

    但是antd-vue 官网的示例为

    import zhCN from 'ant-design-vue/lib/locale/zh_CN.js';
    这其中有涉及到require,而这require是node才有的。

    所以会导致以下错误。

    正确的使用方法:(有用请给个赞,哈哈哈)

    import zhCN from 'ant-design-vue/es/locale/zh_CN.js'




    如果出现时间控件一半中文一半英文时,需要引入moment.js
    npm i moment --save

    import moment from 'moment';
    moment.locale('zh-cn');
    import 'moment/locale/zh-cn';(可以同引入在同一个文件夹)

    如果出现以下错误。

     请直接修改 或者替换内容  ‘....../node_modules/moment/locale/zh-cn.js’;

    替换为:

    //! moment.js locale configuration
    //! locale : Chinese (China) [zh-cn]
    //! author : suupic : https://github.com/suupic
    //! author : Zeno Zeng : https://github.com/zenozeng
    //! author : uu109 : https://github.com/uu109
    
    import moment from 'moment';
    moment.locale('zh-cn');
    
    
    (function (moment, factory) {
        typeof exports === 'object' && typeof module !== 'undefined'
        && typeof require === 'function' ? factory(require('../moment')) :
            typeof define === 'function' && define.amd ? define(['../moment'], factory) :
                factory(moment)
    }(moment, (function (moment) { 'use strict';
    
        //! moment.js locale configuration
        var zhCn = moment.defineLocale('zh-cn', {
            months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
                '_'
            ),
            monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(
                '_'
            ),
            weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
            weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
            weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
            longDateFormat: {
                LT: 'HH:mm',
                LTS: 'HH:mm:ss',
                L: 'YYYY/MM/DD',
                LL: 'YYYY年M月D日',
                LLL: 'YYYY年M月D日Ah点mm分',
                LLLL: 'YYYY年M月D日ddddAh点mm分',
                l: 'YYYY/M/D',
                ll: 'YYYY年M月D日',
                lll: 'YYYY年M月D日 HH:mm',
                llll: 'YYYY年M月D日dddd HH:mm',
            },
            meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
            meridiemHour: function (hour, meridiem) {
                if (hour === 12) {
                    hour = 0;
                }
                if (meridiem === '凌晨' || meridiem === '早上' || meridiem === '上午') {
                    return hour;
                } else if (meridiem === '下午' || meridiem === '晚上') {
                    return hour + 12;
                } else {
                    // '中午'
                    return hour >= 11 ? hour : hour + 12;
                }
            },
            meridiem: function (hour, minute, isLower) {
                var hm = hour * 100 + minute;
                if (hm < 600) {
                    return '凌晨';
                } else if (hm < 900) {
                    return '早上';
                } else if (hm < 1130) {
                    return '上午';
                } else if (hm < 1230) {
                    return '中午';
                } else if (hm < 1800) {
                    return '下午';
                } else {
                    return '晚上';
                }
            },
            calendar: {
                sameDay: '[今天]LT',
                nextDay: '[明天]LT',
                nextWeek: function (now) {
                    if (now.week() !== this.week()) {
                        return '[下]dddLT';
                    } else {
                        return '[本]dddLT';
                    }
                },
                lastDay: '[昨天]LT',
                lastWeek: function (now) {
                    if (this.week() !== now.week()) {
                        return '[上]dddLT';
                    } else {
                        return '[本]dddLT';
                    }
                },
                sameElse: 'L',
            },
            dayOfMonthOrdinalParse: /d{1,2}(日|月|周)/,
            ordinal: function (number, period) {
                switch (period) {
                    case 'd':
                    case 'D':
                    case 'DDD':
                        return number + '日';
                    case 'M':
                        return number + '月';
                    case 'w':
                    case 'W':
                        return number + '周';
                    default:
                        return number;
                }
            },
            relativeTime: {
                future: '%s后',
                past: '%s前',
                s: '几秒',
                ss: '%d 秒',
                m: '1 分钟',
                mm: '%d 分钟',
                h: '1 小时',
                hh: '%d 小时',
                d: '1 天',
                dd: '%d 天',
                w: '1 周',
                ww: '%d 周',
                M: '1 个月',
                MM: '%d 个月',
                y: '1 年',
                yy: '%d 年',
            },
            week: {
                // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
                dow: 1, // Monday is the first day of the week.
                doy: 4, // The week that contains Jan 4th is the first week of the year.
            },
        });
        return zhCn;
    
    })));
    

      





     
  • 相关阅读:
    适配不同屏幕的宏
    phpstrom 10 激活
    php三维数组去重
    Ajax总结
    Node.js中处理异步编程(使用回调处理一次性事件,使用事件监听器处理重复性事件)
    JavaScript中函数对象的call()和apply()方法的总结
    jQuery中prop()方法和attr()方法可能遇到的问题小结
    Node.js中url的parse、format、resolve方法详解
    处理跨域方式
    JS获取网页窗口大小、浏览器窗口大小、页面元素位置
  • 原文地址:https://www.cnblogs.com/hello-dummy/p/15533408.html
Copyright © 2011-2022 走看看