节点vue.js在开发模式下运行时的不同代码场景

Question

我有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 ....
  }


}

Answer 1

我假设您正在使用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...

Answer 2

您无法从浏览器访问此信息。

但有三种解决方案：

在编译时，在代码中创建一个定义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代码路径！