我已经坚持了好几个星期了,我无法理解。这让我发疯了...我已经阅读了很多教程,听起来它应该有用了!
我有一个expressjs服务器设置和一个vuejs应用程序。我希望能够使用历史浏览器模式为vuejs路由提供服务,并且我还希望能够为我的api层设置服务器端路由。
如果我禁用历史记录模式,一切正常 - 但我需要启用历史记录模式,以便我可以使用auth0库和回调。回调不允许在网址中使用#。
这是我的代码:
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应用程序。
任何帮助将不胜感激!我正处在我认为不可能的地步。
答案 0 :(得分:2)
我遇到了同样的问题。我通过在我的api路由之后添加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-handle-vue-routes-with-express-ones/23522/2