前端项目配置

项目中一定会有一些配置信息，需要在上线的时候进行修改，例如 api 接口地址。项目中添加了public/application-config.js进行通用的项目配置。这个配置文件是类似 Spring Boot 中的 application.yml，也就是说也不是一个可以动态修改的配置项，需要动态修改的配置项还是需要与后端配合，进行接口请求数据的方式完成。

添加配置

你开发的模块可能也需要一些动态配置项，这时候就需要在public/application-config.js添加需要的配置。public/application-config.js可以是多个 js 对象，根据需要完成命名添加，但是切记的是要书写全局声明。

例如：当前的public/application-config.js是如下内容

/**
 * 接口地址
 */
const apiBaseUrl = {
  // BP主模块
  bp: 'api/basic-paper-bp',
  // 登录模块
  sso: 'api/basic-paper-sso',
};

那么：src/config/application-config-types.ts中就是如下内容：

export interface ApiBaseUrl {
  /**
   * BP主程序请求接口地址
   */
  bp: string;
  /**
   * 单点登录请求接口地址
   */
  sso: string;
}

其中的ApiBaseUrl的名称对应application-config.js中的apiBaseUrl，由于这个是接口类，所以首字母要大写。创建这个类型后你在项目中使用才会有代码提示。 但是，仅仅是创建一个接口类是不行的，因为你要访问的数据是静态 js 中的apiBaseUrl，所以还需要在types/global.d.ts中进行全局变量声明，对应的数据如下：

import { ApiBaseUrl } from '@/config/application-config-types';

declare global {
  export const apiBaseUrl: ApiBaseUrl;
}

为apiBaseUrl添加新的属性

假如我要添加一个新的接口地址配置ticket，那么就要修改public/application-config.js和src/config/application-config-types.ts，无需修改types/global.d.ts

public/application-config.js

/**
 * 接口地址
 */
const apiBaseUrl = {
  // BP主模块
  bp: 'api/basic-paper-bp',
  // 登录模块
  sso: 'api/basic-paper-sso',
  // 工单模块
  ticket: 'api/basic-paper-ticket',
};

src/config/application-config-types.ts

export interface ApiBaseUrl {
  /**
   * BP主程序请求接口地址
   */
  bp: string;
  /**
   * 单点登录请求接口地址
   */
  sso: string;
  /**
   * 工单模块请求接口地址
   */
  ticket: string;
}

添加一个新的配置对象

假设我们要添加一个主题配置对象spTheme，那么三个文件都要进行修改

public/application-config.js

/**
 * 接口地址
 */
const apiBaseUrl = {
    // BP主模块
    bp: 'api/basic-paper-bp',
    // 登录模块
    sso: 'api/basic-paper-sso',
  },
  spTheme = {
    color: '#000',
  };

src/config/application-config-types.ts

export interface ApiBaseUrl {
  /**
   * BP主程序请求接口地址
   */
  bp: string;
  /**
   * 单点登录请求接口地址
   */
  sso: string;
}

export interface SpTheme {
  /**
   * 颜色
   */
  color: string;
}

types/global.d.ts

import { ApiBaseUrl, SpTheme } from '@/config/application-config-types';

declare global {
  export const apiBaseUrl: ApiBaseUrl;
  export const spTheme: SpTheme;
}