我有Vue.js前端应用程序和基于ExpressJS的nodeJS后端。ExpressJS还用作静态构建的Vue.js应用程序的web服务器
前端应用程序通过rest和WebSocket与express后端通信。它使用window.location实例中的url主机，可以轻松地与后端通信
在生产模式下，当在静态expressJS服务器区域中构建应用程序时，一切工作都很完美
在开发模式下，Vue使用它自己的web服务器，并且基于window.location的后端URL是不正确的，因为在同一主机和端口上没有表达式。
所以我的问题是，如果运行在dev模式下，是否可能更改一些代码块？
比如这样的东西：
if( devmode)
{
const url = "http://somebackendhost/rest"
}
else {
const url = location.host ....
}
}
您无法从浏览器访问此信息。
但有三种解决方案：
在编译时，在代码中创建一个定义devmode的变量(常量devmode=true；)
因为绑定程序可以缩小变量名或出于安全原因更改范围,所以可能会出现无法访问的情况。
因此，第二个解决方案是在localstorage中定义devmode。
第三种解决方案几乎是最好的。
如果您正在开发，那么您可能是通过localhost访问您的web应用程序。
location.hostname将返回主机的名称，因此您可以执行以下操作：
const devmode = location.hotname == 'localhost';
不要这样做。使用本地REST API开发一个完全工作的web应用程序，并在某个变量中定义REST API的URL，因此当您准备生产应用程序时，您或编译器只需更改REST API代码中的URL adress变量。
为什么这是最好的解决方案？因为它不会影响最终用户的性能,而且他们将加载更少的代码,这是最好的做法。
编译生产版本时不要忘记删除所有devmode代码路径！
我假设您正在使用Vue CLI开发您的Vue应用程序
在Vue CLI中，可以使用环境变量
if(process.env.NODE_ENV === "development")
{
}
这得益于WebPack的Define插件，其最大的优点是process.env.node_env在构建时被真实值替换。因此，在生产版本中，Webpack将只看到if（“production”===“development”）{}，并高兴地在优化阶段删除代码，因为它知道这永远不可能是真的
但我不会用这种方法来解决你的问题。使用不同的API服务器（与服务Vue SPA的服务器不同）很容易导致CORS问题
正是针对这个用例，Vue CLI（以及在引擎盖下使用的Webpack Dev server）支持代理
vue.config.js
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://localhost:58300/',
ws: true, // websockets
changeOrigin: true,
}
}
},
},
此配置使Vue Dev server将对/API的任何请求代理到运行在http://localhost:58300/（您的节点/Express应用程序）的其他服务器上，并更改源（因此浏览器认为响应来自Dev服务器）
所有这些都可以在没有Vue CLI的情况下完成，但您需要自己在Webpack Config...
