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

Posted 2023-02-23

【中文标题】如何通过我的自定义开发/生产服务器利用 vue cli 服务功能？

【英文标题】：How can I leverage vue cli serve functionality with my custom dev/prod server?

【发布时间】：2018-12-02 10:48:51

【问题描述】：

我有一个使用 vue cli 3 rc3 的工作 vue 项目，我按照网上众多教程之一创建了一个 express 服务器来在 heroku 上提供我的文件；但是，这些教程都没有说明如何让我闪亮的新 server.js 也适用于 dev，我认为这将是部署到 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);

有人有指导吗？

【问题讨论】：

我还在寻找编写一些服务器端代码并​​在开发模式下使用单个“npm run serve”命令运行所有内容的最佳方法。

嗨@michaeldrotar，你找到解决这个问题的方法了吗？我也在寻找同样的东西。

【参考方案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

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