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

【问题标题】：How to combine Vue app server and Express?Vue应用服务器和Express如何结合？
【发布时间】：2018-12-27 12:16:32
【问题描述】：

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

【问题讨论】：

标签： javascript node.js express vue.js vuejs2

【解决方案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 的其他地方，但我忘记了在哪里。如果您对此有疑问，请询问我，我可以检查一下。

【讨论】：

这会自动启动后端吗？它是否处理 CORS？
没有。在这里查看我使用 cors 来解决问题的方法：github.com/luddens/vueApp/blob/master/server.js 我只是做 app.use(cors())
我最终实现了类似的东西。 if (process.env.NODE_ENV == 'production') app.use(cors()); 另外，我使用带有 --kill-others 的 concurrently 包来启动我的后端并取得了巨大成功——我在 vue-cli 项目上运行 yarn serve，在后端 nodejs/express 项目上运行 node server.js。

【解决方案2】：

由于 Vue 只是一个前端库，托管它并执行诸如提供资产之类的操作的最简单方法是创建一个简单的 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 应用程序

【讨论】：