如何根据运行环境设置接口地址?如何判断当前程序的运行环境?(运行环境是指生产、测试、开发)
比如,生产环境和测试环境的接口地址不一样,前端代码中应该怎么去区分?
我的思路是,打包的时候,把env.NODE_ENV写入到浏览器运行的代码中,这样前端就可以获取env.NODE_ENV,从而进行判断。
或者是,在打包的时候,对指定文件进行检索,根据env.NODE_ENV对某个关键字进行替换,比如检索host,生产环境把host换成a,测试环境把host换成b
具体应该怎么操作?我打包用的是webpack。或者有没有更好的办法?
推荐使用 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版本机器
我们的项目一般是放在linux上的,所以你在linux上设置一下NODE_ENV的环境变量。在window上是空,所以空的时候你把判定为测试环境,有值的为生产环境。手机打字不方便,你先试一下,不明白再追问
前端直接用生产环境接口,在开发环境下添加代理指向开发接口。
我没有做过,提供一个思路。
谢邀,webpack 官方提供了一个 definePlugin,专门用来定义一些变量,通常我们把用于类似开发和生产环境的切换上。https://webpack.github.io/docs/list-of-plugins.html#defineplugin