Javascript 如何结合Vue app server和Express？

我的vue应用程序正在

http://localhost:8080/

（通过Vue CLI）和在

http://localhost:7070

。是否可以在同一地址下运行前端和后端（同时不丢失Vue CLI服务器上的热模块更换）？

由于Vue只是一个前端库，托管它并执行诸如提供资产之类的操作的最简单方法是创建一个简单的易用脚本，您可以使用该脚本启动小型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

---

为了生成它，您不需要为ruuning Vue应用程序运行

npm run service

或

npm run dev

，您需要的是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的其他地方，但我忘了放在哪里。如果您对此有问题，请询问我，我可以检查。

这是否会自动启动后端？它处理CORS吗？不。请查看我对CORS的使用以解决这里的问题：我只做app.use（CORS（））我最终实现了类似的功能<代码>如果（process.env.NODE_env=='production'）app.use（cors（））此外，我还与

--kill others

同时使用了

包来启动我的后端，并取得了巨大成功—我在
vue cli
项目上运行了
Warn serve
，在后端
node server.js
项目上运行了
Warn serve
。