Ant-design-pro: 怎么配置测试环境,生产环境?

[shadiniao]

比如我测试环境的请求地址是
https://192.168.1.1
wss://192.168.1.1

生产环境的请求地址是
https://www.xxx.com
wss://www.xxx.com

是通过build指定process.env吗?
还是设置proxy, websocket的proxy怎么设置

[ant-design-bot]

Translation of this issue:

---

How to configure the test environment and production environment?

For example, the request address of my test environment is
Https://192.168.1.1
Wss://192.168.1.1

The request address of the production environment is
Https://www.xxx.com
Wss://www.xxx.com

Is process.env specified via build?
Or set proxy, websocket proxy how to set

[shadiniao]

问题已解决,我现在是这样做的,不知道有没有更好的选择
在package.json文件中添加build:test,build增加API_ENV=production参数

"build": "cross-env API_ENV=production ESLINT=none roadhog build",
"build:test": "cross-env ESLINT=none roadhog build",

在webpackrc.js文件中添加define

    define: {
        'process.env': {},
        'process.env.NODE_ENV': process.env.NODE_ENV,
        'process.env.API_ENV': process.env.API_ENV,
    },

然后添加一个env.js来判断

const configs = {
    // 正式环境
    production: {
        HTTP_SERVER: 'https://api.xxx.com',

        WS_SERVER: 'wss://api.xxx.com',
    },

    // 测试环境
    test: {
        HTTP_SERVER: 'https://192.168.1.1:9443',

        WS_SERVER: 'wss://192.168.1.1:9443',
    },
};

const API_ENV = process.env.API_ENV ? process.env.API_ENV : 'test';

export const env = configs[API_ENV];

[sorrycc]

这么做挺好，roadhog 里只有 process.env.NODE_ENV，且只有 development 和 production，其他环境通过额外的环境变量实现。

[rellyCheng]

antd pro2.0怎么配置呢?我没有找到webpackrc.js这个文件

[rellyCheng]

@shadiniao @sorrycc

[dxjdqc]

问题已解决,我现在是这样做的,不知道有没有更好的选择
在package.json文件中添加build:test,build增加API_ENV=production参数

"build": "cross-env API_ENV=production ESLINT=none roadhog build",
"build:test": "cross-env ESLINT=none roadhog build",

在webpackrc.js文件中添加define

  define: {
      'process.env': {},
      'process.env.NODE_ENV': process.env.NODE_ENV,
      'process.env.API_ENV': process.env.API_ENV,
  },

然后添加一个env.js来判断

const configs = {
  // 正式环境
  production: {
      HTTP_SERVER: 'https://api.xxx.com',

      WS_SERVER: 'wss://api.xxx.com',
  },

  // 测试环境
  test: {
      HTTP_SERVER: 'https://192.168.1.1:9443',

      WS_SERVER: 'wss://192.168.1.1:9443',
  },
};

const API_ENV = process.env.API_ENV ? process.env.API_ENV : 'test';

export const env = configs[API_ENV];

请问有完整的配置文件吗？新手正在爬坑中

[zhuxiwen]

antd小白，参考(https://www.jianshu.com/p/d3b7d815ebb1)
没试过线上的，本地目前看起来OK的(antd pro version 2.2.1)
看umi文档后试着用.env文件是可以的，不过感觉不是很灵活，于是在根目录（package.json同级）新增了一个名为sysConfig.js的文件，如下图

然后在config/config.js中引入

按文档上说的

如图加入define即可

效果(项目中直接process.env.xxx引用)

---

ps:sysConfig的东西写在defaultSettings.js里也不错

[chenjpu]

@shadiniao 能否分享一下 websocket proxy的配置方式

[ritingliudd01]

非常重要：

新版的 Antd Pro 不用 roadhog 了，webpack 的配置都移到了 config/config.js，在

define: { API_ENV: API_ENV || 'dev', // 默认为本地开发环境 }

中定义的变量，可以在 src 下的任何 js 中直接使用，像这样 console.log(API_ENV)，
不再是 console.log(process.env.API_ENV) 也无需引入任何依赖。

[chenjpu]

@ritingliudd01 谢谢，已经解决

[iaminvictus1993]

区分开发环境变量，mark

[crixusshen]

package scripts中用UMI_ENV：

"start:sit": "UMI_ENV=sit umi dev",

配置文件用具体环境的后缀名来区分，然后利用已集成的DefinePlugin将NodeEnv转化为JS环境，UMI会自动覆盖：

// config/config.ts:
export default {
   // ........ 
  define: {
    API_SERVER: "https://xxx.xxx.com", // 接口服务器地址
  },
  // .........
};

// config/config.sit.ts:
export default {
  define: {
    API_SERVER: "https://xxx.xxx.com", // 接口服务器地址
  }
};

// config.sit.ts配置信息会自动覆盖config.ts内的信息，注意是覆盖，不是替换，这其实是UMI提供的特性，开发者应该充分利用UMI已提供的特性来解决多环境问题。

这样才是多环境最优的处理方式。

[zoe0316]

package scripts中用UMI_ENV：

"start:sit": "UMI_ENV=sit umi dev",

配置文件用具体环境的后缀名来区分，然后利用已集成的DefinePlugin将NodeEnv转化为JS环境，UMI会自动覆盖：

// config/config.ts:
export default {
   // ........ 
  define: {
    API_SERVER: "https://xxx.xxx.com", // 接口服务器地址
  },
  // .........
};

// config/config.sit.ts:
export default {
  define: {
    API_SERVER: "https://xxx.xxx.com", // 接口服务器地址
  }
};

// config.sit.ts配置信息会自动覆盖config.ts内的信息，注意是覆盖，不是替换，这其实是UMI提供的特性，开发者应该充分利用UMI已提供的特性来解决多环境问题。

这样才是多环境最优的处理方式。

赞同，参阅了 https://umijs.org/zh/guide/config.html#umi-env 配置了不同的 config.[env].js

[sugov5]

package scripts中用UMI_ENV：

"start:sit": "UMI_ENV=sit umi dev",

配置文件用具体环境的后缀名来区分，然后利用已集成的DefinePlugin将NodeEnv转化为JS环境，UMI会自动覆盖：

// config/config.ts:
export default {
   // ........ 
  define: {
    API_SERVER: "https://xxx.xxx.com", // 接口服务器地址
  },
  // .........
};

// config/config.sit.ts:
export default {
  define: {
    API_SERVER: "https://xxx.xxx.com", // 接口服务器地址
  }
};

// config.sit.ts配置信息会自动覆盖config.ts内的信息，注意是覆盖，不是替换，这其实是UMI提供的特性，开发者应该充分利用UMI已提供的特性来解决多环境问题。

这样才是多环境最优的处理方式。

还有更优雅的方式吗？
在v5版本中，会出现以下两个问题：
1、在非NODE环境下使用define内的变量时IDE会报错，需要在typings.d.ts内再次声明该变量。
参考文档：https://pro.ant.design/docs/environment-variables-cn#处理在-lint-中的报错
2、在coding过程中，没有代码辅助。