如何用ts搭建一个vue3通用项目底座 | 第四篇：utils函数

前言

前面三篇的源码在gitee上可以查看common-template，1.0.1版本是规范篇结束，1.0.2版本是vite配置篇结束，后面都是一些细节补充，各位可以根据自己需要阅读。

1、log工具函数

在src目录下新建utils文件，里面新建log.ts文件，用来输出warn和error的工具函数。

// log.ts
const projectName = import.meta.env.VITE_GLOB_APP_TITLE;

export function warn(message: string) {
   
  console.warn(`[${
     projectName} warn]:${
     message}`);
}

export function error(message: string) {
   
  throw new Error(`[${
     projectName} error]:${
     message}`);
}

比较简单，没什么可说的。

2、env环境相关函数

新建env.ts文件，这里存放环境变量的工具函数。

// env.ts
import type {
    GlobEnvConfig } from '/#/config';
import {
    warn } from '/@/utils/log';
import pkg from '../../package.json';
import {
    getConfigFileName } from '../../build/getConfigFileName';

/**
 * 缓存秘钥前缀
 */
export function getCommonStoragePrefix() {
   
  const {
    VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
  return `${
     VITE_GLOB_APP_SHORT_NAME}__${
     getEnvMode()}`.toUpperCase();
}

/**
 * 根据版本生成缓存密钥
 */
export function getStorageShortName() {
   
  return `${
     getCommonStoragePrefix()}${
     `__${
       pkg.version}`}__`.toUpperCase();
}

/**
 * 获取全局配置（打包时将独立提取配置）
 */
export function getENV(): GlobEnvConfig {
   
  const isMode = isDevMode();
  const ENV_NAME = getConfigFileName(import.meta.env);

  return isMode ? (import.meta.env as unknown as GlobEnvConfig) : window[ENV_NAME];
}

/**
 * @description: 获取环境变量
 * @example: development
 */
export function getEnvMode(): string {
   
  return import.meta.env.MODE;
}

/**
 * @description: 是否是开发模式
 */
export function isDevMode(): boolean {
   
  return import.meta.env.DEV;
}

/**
 * @description: 是否是生产模式
 */
export function isProdMode(): boolean {
   
  return import.meta.env.PROD;
}

export function getAppEnvConfig() {
   
  const ENV = getENV();

  const {
   
    VITE_GLOB_APP_TITLE,
    VITE_GLOB_API_URL,
    VITE_GLOB_APP_SHORT_NAME,
    VITE_GLOB_API_URL_PREFIX,
    VITE_GLOB_UPLOAD_URL,
  } = ENV;

  if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
   
    warn(`VITE_GLOB_APP_SHORT_NAME变量只能是字符/下划线，请在环境变量中修改并重新运行.`);
  }

  return {
   
    VITE_GLOB_APP_TITLE,
    VITE_GLOB_API_URL,
    VITE_GLOB_APP_SHORT_NAME,
    VITE_GLOB_API_URL_PREFIX,
    VITE_GLOB_UPLOAD_URL,
  };
}

每个函数的作用都在注释里写着。
这里涉及到一个/#/config路径文件，代表在types目录下的config文件，在src/types目录下新建config.d.ts文件全局类型文件。

// config.d.ts
export interface GlobEnvConfig {
   
  // 站点名称
  VITE_GLOB_APP_TITLE: string;
  // 服务接口url
  VITE_GLOB_API_URL: string;
  // 服务接口url前缀
  VITE_GLOB_API_URL_PREFIX?: string;
  // 项目简称
  VITE_GLOB_APP_SHORT_NAME: string;
  // 上传url
  VITE_GLOB_UPLOAD_URL?: string;
}

3、cipher加密解密函数

这个工具函数用到了crypto-js插件，安装一下。

// package.json
"crypto-js": "^4.1.1",
"@types/crypto-js": "^4.1.1",

新建cipher.ts文件

// cipher.ts
import {
    encrypt, decrypt } from 'crypto-js/aes';
import {
    parse } from 'crypto-js/enc-utf8';
import pkcs7 from 'crypto-js/pad-pkcs7';
import ECB from 'crypto-js/mode-ecb';
import md5 from 'crypto-js/md5';
import UTF8 from 'crypto-js/enc-utf8';
import Base64 from 'crypto-js/enc-base64';

export interface EncryptionParams {
   
  key: string;
  iv: string;
}

export class AesEncryption {
   
  private key;
  private iv;

  constructor(opt: Partial<EncryptionParams> = {
   }) {
   
    const {
    key, iv } = opt;
    if (key) {
   
      this.key = parse(key);
    }
    if (iv) {
   
      this.iv = parse(iv);
    }
  }

  get getOptions() {
   
    return {
   
      mode: ECB,
      padding: pkcs7,
      iv: this.iv,
    };
  }

  // 加密
  encryptByAES(cipherText: string) {
   
    return encrypt(cipherText, this.key, this.getOptions).toString();
  }

  // 解密
  decryptByAES(cipherText: string) {
   
    return decrypt(cipherText, this.key, this.getOptions).toString(UTF8);
  }
}

// UTF8解密
export function encryptByBase64(cipherText: string) {
   
  return UTF8.parse(cipherText).toString(Base64);
}

// Base64解密
export function decodeByBase64(cipherText: string) {
   
  return Base64.parse(cipherText).toString(UTF8);
}

// md5解密
export function encryptByMd5(password: string) {
   
  return md5(password).toString();
}

4、is判断函数

新建is.ts函数，用来判断数据类型

// is.ts
const toString = Object.prototype.toString;

// 判断是否符合[object type]，是返回true
export function isType(val: unknown, type: string) {
   
  return toString.call(val) === `[object ${
     type}]`;
}

// 判断数据类型是否为undefined，是返回false
export function isDef<T = unknown>(val?: T): val is T {
   
  return typeof val !== 'undefined';
}

// 判断数据类型是否为undefined，是返回true
export function isUnDef<T = unknown>(val?: T): val is T {
   
  return !isDef(val);
}

// 判断数据类型是否为Object且不为null，是返回true
export function isObj(val: any): val is Record<any, any> {
   
  return val !== null && isType(val, 'Object')