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

Question

我有一个正在使用vue cli 3 rc3的vue项目，并且我遵循了许多在线教程之一，以创建express服务器在heroku上为我的文件提供服务。但是，这些教程都没有说我怎样才能让闪亮的新内容server.js也适用于开发人员，我认为这将是部署到诸如heroku之类而不是面向静态资产的全部目的。

显然，我可以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/（例如如何设置端口、代理...）