Question

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

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

我可以创建一个单独的项目（我想这很普遍），但是我希望后端和前端共享代码。

我已经尝试解决了一个星期，甚至求助于阅读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
  }

以上代码将在快递服务器中运行vuejs。换句话说

npm run serve

将运行您的expressjs

您可以在https://cli.vuejs.org/config/上了解有关vue.config.js的更多信息（例如，如何设置端口，代理...）

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

1 个答案: