Question

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

Answer 1

由于Vue只是一个 frontend 库，因此托管它以及执行诸如提供资产之类的最简单方法是创建一个简单的Express友好脚本，您可以使用它来启动小型Web服务器。如果尚未阅读Express，请快速阅读。之后，添加快递：

npm install express --save

现在将server.js文件添加到项目的根目录：

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 7070;
var hostname = '127.0.0.1';

app.listen(port, hostname, () => {
   console.log(`Server running at http://${hostname}:${port}/`);
 });

之后，您可以运行：

 node server

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

假设您已经有dist目录（如果没有运行的话）：

npm run build

为了生成它，您不需要运行npm run serve或npm run dev来使Vue应用程序失效

Answer 2

您要寻找的是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的其他版本上，但我忘记了位置。如果您对此有疑问，请问我，我可以检查出来。

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

2 个答案: