如何将VUEJS路由与历史记录后备路由和ExpressJS路由

Question

我已经陷入困境了几周，我无法弄清楚。这让我发疯了...我阅读了许多教程，听起来好像应该有效！

我有一个ExpressJS服务器设置和VueJS应用程序。我希望能够使用历史记录浏览器模式为VUEJS路由服务，我也希望能够为我的API层设置服务器端路由。

如果我禁用历史模式，一切正常 - 但是我需要启用历史模式，以便可以使用auth0库和回调。回调不允许在URL中。

这是我的代码：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const logger = require('morgan');
const history = require('connect-history-api-fallback');
const app = express();
app.use(require('connect-history-api-fallback')())
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(history({
  verbose: true
}));
app.get('/api', (req, res) => res.send('Hello World!'))
app.use('/', express.static(path.join(__dirname, 'dist')));
var port = process.env.PORT || 8080;
app.listen(port);
console.log('server started '+ port);

对于上面的代码，VUEJS应用程序坐在/DIST和该工作的所有路线下。但是，当我尝试击中/API时 - 它也被重定向到Vuejs应用程序。

任何帮助将不胜感激！我正在认为这是不可能的。

Answer 1

我遇到了同样的问题。我通过在之后添加 app.use(history()) 修复了它，但是在 app.use('/', express.static(path.join(__dirname, 'dist')));。

之前

所以我想对你来说就像

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const logger = require('morgan');
const history = require('connect-history-api-fallback');
const app = express();
app.use(logger('dev'));
app.use(bodyParser.json());
app.get('/api', (req, res) => res.send('Hello World!'));
app.use(history({
  verbose: true
}));
app.use('/', express.static(path.join(__dirname, 'dist')));
var port = process.env.PORT || 8080;
app.listen(port);
console.log('server started '+ port);

这个答案对我有帮助：https：//forum.vuejs.org/t/how-to-the-handle-vue-routes-with-express-ons/23522/2