vuejs2 - 如何在我的自定义开发/生产服务器中利用 vue cli 服务功能？

Question

我有一个使用 vue cli 3 rc3 的有效 vue 项目，我遵循了许多在线教程之一来创建 express服务器在heroku上提供我的文件；然而，这些教程都没有说明我如何拥有 Shiny 的新 server.js也适用于开发人员，我认为这将是部署到诸如 heroku 之类的东西而不是面向静态 Assets 的东西的全部意义。

显然我可以放弃 npm run serve cli 提供并仅使用我自己的服务器的命令，但随后我失去了热加载和其他惊人的功能。

我可以创建一个单独的项目(我猜这很常见)，但我希望我的后端和前端共享代码。

一周以来，我一直试图解决这个问题，甚至通过阅读 github 上的 cli 代码来了解复制的难度。

Webpack 通过 webpack-dev-middleware 提供功能，但是当我尝试按原样使用它时，我会丢失配置错误并且事情不太好用 - 大概是因为 vue cli 提供的默认值我丢失了。

我认为这样的事情应该有效......

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();

if (process.env.NODE_ENV === 'production') {
  app.use('/', serveStatic(path.join(__dirname, '/dist')));
  app.get('*', function(req, res) {
    res.sendFile(__dirname + '/dist/index.html');
  });
} else {
  // TODO: Find/create some middleware that does
  // everything that vue-cli-service serve does
  // app.use(require('vue-dev-middleware'));
}

const port = process.env.PORT || 8080;
app.listen(port);

有没有人有任何指导？

Answer 1

在你的 vue.config.js 文件中

const configureAPI = require("./src/server/configure");

module.exports = {
  devServer: {
    before: configureAPI,
    disableHostCheck: true
  }
}

你的 express js文件

//src/server/configure.js file
module.exports = app => {
    //do stuff
  }

上面的代码将在 express 服务器中运行 vuejs。换句话说

npm run serve

将运行你的 expressjs

你可以在这里阅读更多关于 vue.config.js 的信息 https://cli.vuejs.org/config/ (例如如何设置端口、代理...)