如何在不同环境（开发、测试、生产等）打开不同URL

Question

就目前有个需求，听意思大概是有一个按钮，点击后在开发、测试、生产环境需要分别执行

// 开发
window.open(URL1)
// 测试
window.open(URL2)
// 生产
window.open(URL3)

之前在接口请求的时候确实也遇到过这个问题，后来是用 process.env 解决了。但是其实我对这个一知半解……遇到现在的新需求，我尝试性在 process.env 中添加新的属性。但是debugger的时候一看，浏览器识别不了 process ，显示的是 undefined 。
然后我就……没招了。
提问一下有什么办法能够解决这个问题

Answer 1

可以考虑使用Webpack分环境打包，在打包的时候就根据环境变量替换成了对应的URL地址。这里有一篇文章可以参考：https://www.cnblogs.com/tugen...

Answer 2

process.env中的变量是打包的时候会被替换掉。
可以类似这样：

const urlMap = { dev: 'xxx', test: 'xxx', prod: 'xxx' }
const url = urlMap[process.env.NODE_ENV]
window.open(url)

Answer 3

用VUE？环境变量和模式

Answer 4

开发测试生产环境下当前域名应该不同,可以用这个判断

Answer 5

前面答案有说了，补充下简要代码把：

const location = window.location.origin

let url = ''
switch (location) {
  // 生产
  case a:
    url = A
    break
  // 预发布
  case b:
    url = B
    break
  //测试
  default:
    url
}

Answer 6

如果是前端页面上需要使用。process 是 Node.js 中的全局对象，在浏览器里是没有的。
可以使用 webpack.DefinePlugin 插件，根据条件设置不同的值，在打包时填充页面上的内容。

如：

...
    plugins: [
        ...
        new webpack.DefinePlugin({
            MY_URL: devMode ? 'http://127.0.0.1:8080/' : 'https://abc.def.com/'
        })
    ]
...

在前端js中：

// 打包后，这个值会被填充为对应的值
const baseUrl = MY_URL;