Ant Design Pro中的多个环境变量文件

在Vue项目中我们会发现，有环境文件.env文件，可以配置生产和调试环境下的不同环境变量，在antdpro中该如何做到呢？接下来我们就来看看如何在项目中添加环境变量。

在antdpro项目中有config文件夹，里面是项目的配置信息，因为环境变量是在node环境中词啊可以访问到，所以antdpro提供了defined配置项，我们只需要将所需变量写到改配置项下面就可以在其他非node环境中使用，如下：

1
2
3
4
5
6
7
//config/config.ts 
define: {
    API_URL: '/dev-api',
    MQTT_URL: 'wss://www.example.com/mqtt',
    MQTT_USERNAME: 'hzpc',
    MQTT_PASSWORD: '123456'
  },

然后我们在app.tsx 中就可以访问到

1
2
3
4
5
6
//app.tsx
export const request = {
  baseURL: API_URL,
  timeout: 50000,
  ...errorConfig,
};

如果我们需要生产环境，同样的在config文件夹下增加config.prod.ts文件输入配置项就可以了

1
2
3
4
5
6
export default {
    define: {
        API_URL: '/prod-api',
        NAME: 'aa'
    }
}

代理文件proxy.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
 * @name 代理的配置
 * @see 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 */
export default {
  // 如果需要自定义本地开发服务器  请取消注释按需调整
  dev: {
    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
    '/dev-api': {
      // 要代理的地址
      target: 'http://172.16.36.55:8080',//后端地址
      // 配置了这个可以从 http 代理到 https
      // 依赖 origin 的功能可能需要这个，比如 cookie
      changeOrigin: true,
      pathRewrite: { '^/dev-api': '' },
    },
  },
  /**
   * @name 详细的代理配置
   * @doc https://github.com/chimurai/http-proxy-middleware
   */
  test: {
    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
    '/api': {
      target: 'https://proapi.azurewebsites.net',
      changeOrigin: true,
      pathRewrite: { '^/dev-api': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  prod: {
    '/prod-api': {
      target: 'http://211.90.247.228:8000',
      changeOrigin: true,
      pathRewrite: { '^/prod-api': '' },
    }
  }
};

截屏2024-03-16 16.48.56.png

启动项目使用不同的命令

npm run dev使用的就是开发环境变量，对应的网络请求base_url是/dev-api，代理替换的地址是http://172.16.36.55:8080,而npnm run dev:prod，则使用的是生产环境的变量，对应的网络请求base_url是/peod-api，代理的地址是http"//xxx.xxx.xxx:8000。