如何根据运行环境设置接口地址？

Question

如何根据运行环境设置接口地址？如何判断当前程序的运行环境？（运行环境是指生产、测试、开发）
比如，生产环境和测试环境的接口地址不一样，前端代码中应该怎么去区分？

我的思路是，打包的时候，把env.NODE_ENV写入到浏览器运行的代码中，这样前端就可以获取env.NODE_ENV，从而进行判断。
或者是，在打包的时候，对指定文件进行检索，根据env.NODE_ENV对某个关键字进行替换，比如检索host，生产环境把host换成a，测试环境把host换成b

具体应该怎么操作？我打包用的是webpack。或者有没有更好的办法？

Answer 1

谢邀，webpack 官方提供了一个 definePlugin，专门用来定义一些变量，通常我们把用于类似开发和生产环境的切换上。https://webpack.github.io/docs/list-of-plugins.html#defineplugin

Answer 2

推荐使用 html-webpack-plugin 给 Webpack 的 html 入口文件做一些配置。

比如我的 webpack build config ：

config.plugins = [
    new html({
        filename: 'index.html', //输出的 html
        template: './h5/src/app.html', //模板
        isDIST: process.env.DIST,
        isBETA: process.env.BETA
    }),
]

在 app.html 中

<script>
{% if (o.htmlWebpackPlugin.options.isDIST) { %}
  window.HISTORY_MODE = true
  window.API_URL = 'http://__生产环境API地址__/'
{% }else if(o.htmlWebpackPlugin.options.isBETA){ %}
  window.HISTORY_MODE = false
  window.API_URL = 'http://__BETA环境API地址__/'
{% } %}
</script>

运行打包命令时可以

• DIST=true npm run build 发布到生产机器

• BETA=true npm run build 发布到BETA版本机器

Answer 3

前端直接用生产环境接口，在开发环境下添加代理指向开发接口。
我没有做过，提供一个思路。

Answer 4

我们的项目一般是放在linux上的，所以你在linux上设置一下NODE_ENV的环境变量。在window上是空，所以空的时候你把判定为测试环境，有值的为生产环境。手机打字不方便，你先试一下，不明白再追问