vue动态多环境配置websocket的ws://地址

前景

一般vue多环境配置涉及三个文件：.env.development，.env.production，.env.test去配置，通过执行不同命令来区分运行环境。现在公司要求前端不要写死ip地址，防止部署的时候忘记更换命令部错包，通过nginx去代理配置不同端口。
现要求的配置文件

// .env.development是本地的开发环境正常写地址
VUE_APP_BASE_API = 'http://aaaa:8080'
VUE_APP_BASE_API_WEBSOCKET = 'ws://sss:8080'
//.env.production文件 /gateway是运维同学做的nginx代理，会指向我们想要的ip地址和端口
VUE_APP_BASE_API = '/gateway'
VUE_APP_BASE_API_WEBSOCKET = '/socket'

问题来了

通过上面的方式正常的http请求是可以正常访问的，但是websocket代理的地址不行，websocket请求必须要加上ip和端口才行（VUE_APP_BASE_API_WEBSOCKET = 'ws://xxxx:8080/socket’可以正常访问），但是不能写成“VUE_APP_BASE_API_WEBSOCKET = ‘ws://xxxx:8080/socket’”
必须要写活

websocket-api.js文件（websocket接口请求文件）

// 判断当前是什么环境, 如果是开发环境就用.env.development文件的配置，如果是生产环境就用拼接方式
// window.document.location.host当前窗口的 location 或 URL 的 hostname 和 port 号码
const env = process.env.NODE_ENV
const wsUrl = env === 'development' ? process.env.VUE_APP_BASE_API_WEBSOCKET : `ws://${window.document.location.host}/socket`
// 州数据大屏
export const cityData = (userId) => {
  return `${wsUrl}/getContinentStatistics/18`
}