Closed shadiniao closed 5 years ago
Translation of this issue:
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
问题已解决,我现在是这样做的,不知道有没有更好的选择 在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];
这么做挺好,roadhog 里只有 process.env.NODE_ENV,且只有 development 和 production,其他环境通过额外的环境变量实现。
antd pro2.0怎么配置呢?我没有找到webpackrc.js这个文件
@shadiniao @sorrycc
问题已解决,我现在是这样做的,不知道有没有更好的选择 在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];
请问有完整的配置文件吗?新手正在爬坑中
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里也不错
@shadiniao 能否分享一下 websocket proxy的配置方式
非常重要:
新版的 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)
也无需引入任何依赖。
@ritingliudd01 谢谢,已经解决
区分开发环境变量,mark
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已提供的特性来解决多环境问题。
这样才是多环境最优的处理方式。
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
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过程中,没有代码辅助。
我感觉配置环境这一方面,飞冰做的不错
现在是v5 我还是不知道怎么配置,只要配置了define 接口就会自动变成这个地址吗
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已提供的特性来解决多环境问题。
这样才是多环境最优的处理方式。
确实,这是最优雅的配置方式了,但是我配置后打包后始终取的prod的配置,test或者pre都无效=。=
比如我测试环境的请求地址是 https://192.168.1.1 wss://192.168.1.1
生产环境的请求地址是 https://www.xxx.com wss://www.xxx.com
是通过build指定process.env吗? 还是设置proxy, websocket的proxy怎么设置