记一次解决不同时区的客户端需要展示的时间都为北京时间的问题

具体需求是这样的

产品说他们在国外不同时区的同事，在系统上看到的时间需要和在国内看到的时间一致

已知我们服务器存的时间是时间戳，而时间戳指的是该时刻到格林威治时间的毫秒数，并不存在时区的说法

解决办法

让在非北京时间时区的同事将其电脑时区改成东八区
使用dayjs的timeZone插件，将时区转换成东八区

出现的问题

让其他时区的同事更换电脑时区，无疑是最简单的解决办法，但是会影响他们看正常时间的需求，而且他们也不愿意改，所以此方案只能作罢
dayjs的timeZone插件设置默认时区，但需要注意的是，设置默认时区之后，只有dayjs.tz对象的时区改变了，但是由于系统中已经有数不清的地方都是使用的dayjs对象来取的时间，不可能将每一处都改成dayjs.tz

破局

办法一显然是不可行了，只能从办法二去想办法解决。

但是将系统中所有使用dayjs来取值的都改成dayjs.tz也是行不通的，所以就只剩下了一条路：
想办法让dayjs取的值就是设置默认时区后的值

上代码

utils/dayjs.ts文件

typescript 复制代码

// 此处不是直接 import dayjs 而是引入 min.js 文件
// 后面会说明为什么会这样
import dayjs from 'dayjs/dayjs.min'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)
// 将默认时区从本地时区变为自定义（北京）时区。
dayjs.tz.setDefault('Asia/Shanghai')
// 包装 dayjs.tz 函数
const dayjsWrapper = function (...args) {
  return dayjs(...args).tz()
}
// 将 dayjs 上的所有属性方法都加到 dayjsWrapper 上
Object.assign(dayjsWrapper, dayjs)
export default dayjsWrapper

定义此次文件后，后续使用 dayjs 时都引入上述文件即可

typescript 复制代码

import dayjs from '@/utils/dayjs'

export const timestamp2time = (
  timestamp: number,
  format = 'YYYY-MM-DD HH:mm',
) => dayjs(timestamp).format(format)

这样，后续取值时就可以使用timestamp2time直接拿到转换成默认时区的值

最后优化一点

代码中有很多地方都没有通过工具函数，而是直接使用dayjs来取值的，寻找每一处都改为工具函数固然可行，但是麻烦，由此引入我们的杀手锏：webpack

javascript 复制代码

    alias: {
      '@': path.resolve(__dirname, 'src'),
      dayjs$: path.resolve(__dirname, '@/utils/dayjs'),
    }

这样，文件中所有使用import dayjs from 'dayjs'的地方都会在被 webpack 处理，实际导入的则是上面处理后的utils/dayjs.ts文件，这也是为此我们在这个文件中导入dayjs是从dayjs/dayjs.min中导入的原因。

自此，问题完美解决。第一次写文章，写的不好的地方还请见谅。如有更好的解决办法，欢迎讨论。