express - Vue历史模式和 express 服务器出现404错误

Question

我正在快速服务器中运行 vue SPA。问题是当使用历史模式并刷新页面时，我得到一个 404 not found 异常。我尝试使用 connect-history-api-fallback 但不起作用。

我的 express 配置如下所示:

// server.js
var express = require('express');
var history = require('connect-history-api-fallback');


var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.use(history())
app.listen(port);

Answer 1

您试图通过错误的快速服务器脚本使用路由器的历史模式。为了使事情正常进行，您可以使用我的脚本。这是用于以历史模式运行 Vue 应用程序的 my server.js。server.js(带有 Express):

const express = require('express');
const path = require('path');
const history = require('connect-history-api-fallback');

const app = express();

const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));

app.use(staticFileMiddleware);
app.use(history({
  disableDotRule: true,
  verbose: true
}));
app.use(staticFileMiddleware);

app.get('/', function (req, res) {
  res.render(path.join(__dirname + '/dist/index.html'));
});

var server = app.listen(process.env.PORT || 8080, function () {
  var port = server.address().port;
  console.log("App now running on port", port);
});

将此文件放在项目的根目录(不是 src)中。

使用 Node 运行此脚本:node server.js

不要忘记为生产构建您的应用程序 ;)!