如何将Vue应用服务器和Express结合起来？

Question

我有 vue 应用程序（通过 Vue CLI）运行http://localhost:8080/，后端在 Express 上运行http://localhost:7070。是否可以在同一地址下运行前端和后端（同时不会丢失 Vue CLI 服务器的热模块替换）？

Answer 1

您正在寻找的是 devServer 选项。如果您使用的是 vue cli 3，请在主应用程序目录中创建一个 vue.config.js 文件，然后添加以下块：

module.exports = {
  configureWebpack:{
  }, 
  devServer:{
    host: 'localhost',
    hot:true,
    port: 8080,  
    open: 'Chrome',
    proxy: { //https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation
      '/*':{ //everything from root
        target: 'http://localhost:3000',
        secure: false,
        ws: false,
      },
      '/ws/': { //web sockets
        target: 'http://localhost:3000',
        secure: false,
        ws: true
      },
      '!/':{ //except root, which is served by webpack's devserver, to faciliate instant updates
        target: 'http://localhost:3000/',
        secure: false,
        ws: false
      },
    }
  }
}

前端的端口可以是 8080 或其他端口，后端可以是 7070，然后将请求从 8080 上的前端节点服务器代理到 7070 上的后端节点服务器。这是针对 vue cli 3 的。对于早期版本，您有将 devServer 选项放在 IIRC 的其他位置，但我忘了在哪里。如果您对此有疑问，请询问我，我可以检查一下。

Answer 2

由于 Vue 只是一个前端库，因此托管它并执行诸如提供资产之类的操作的最简单方法是创建一个简单的 Express 友好脚本，您可以使用它来启动迷你 Web 服务器。如果您还没有\xe2\x80\x99t，请快速阅读Express 。之后，添加快递：

\n\n

npm install express --save\n

\n\n

现在将server.js文件添加到您的项目\xe2\x80\x99s 根目录：

\n\n

// server.js\nvar express = require(\'express\');\nvar path = require(\'path\');\nvar serveStatic = require(\'serve-static\');\napp = express();\napp.use(serveStatic(__dirname + "/dist"));\nvar port = process.env.PORT || 7070;\nvar hostname = \'127.0.0.1\';\n\napp.listen(port, hostname, () => {\n   console.log(`Server running at http://${hostname}:${port}/`);\n });\n

\n\n

之后你可以运行：

\n\n

 node server\n

\n\n

您的项目将在给定的主机和端口上提供服务

\n\n

假设您已经有了该dist目录，如果还没有运行它：

\n\n

npm run build\n

\n\n

为了生成它，你不需要运行npm run serve或npm run dev运行 Vue 应用程序

\n