如何动态配置请求域名，区分dev,test,product？

Question

• dev本地开发环境，test服务器测试环境；product服务器生产环境；
• 常见的配置是这样的，只能区分dev和test.

const serverUrl = process.env.NODE_ENV === 'development' ? devUrl : testUrl

问题：如果需要再加一个product服务器生产环境前缀productUrl，能够自动识别当前项目运行环境是测试还是生产。需要在前端代码中怎么配置，需要在服务器端怎么配置?

Answer 1

自己解决了。直接判断当前域名来配置不同的serverUrl

const location = window.location.origin
location === local => localUrl
location === test => testUrl
location === production =>productionUrl

Answer 2

有个npm包config，可以针对指定环境做配置，可以了解一下。

Answer 3

const serverUrl = process.env.NODE_ENV === 'development' ? devUrl : process.env.NODE_ENV === 'production' ? productUrl : testUrl

再或者
根目录建立：.env.production，.env.development...

Answer 4

楼上 @赫子子 的方法是目前@vue/cli官方解决方案，这里补充一下，在.env.production，.env.development等环境变量内配置ENV=devlopmen或ENV=production参数，在执行npm run build命令时使用--mode=produciton选项指定读取哪个环境变量，在业务逻辑中不需要单独设置某个环境的API域名，这样利于后期维护，有变动只需要改环境变量就行了，具体配置可以参考@vue/cli官方文档