如何使用带有历史回退和 expressjs 路由的 vuejs 路由

Posted 2023-02-22

【中文标题】如何使用带有历史回退和 expressjs 路由的 vuejs 路由

【英文标题】：How to use vuejs routing with history fallback and expressjs routes

【发布时间】：2018-07-22 13:56:03

【问题描述】：

我已经被这个问题困扰了好几个星期了，我想不通。快把我逼疯了……我读过很多教程，听起来应该可行！

我有一个 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 应用程序。

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

【问题讨论】：

您是否尝试过此页面的 Express/Node.js 部分？ router.vuejs.org/en/essentials/history-mode.html

是的，我试过了。我快要放弃了。我认为回调是不可能的。

你可以使用子域吗？比如 API 的 api.myapp.com 和 vuejs 应用的 myapp.com/about ？

【参考方案1】：

我遇到了同样的问题。我通过添加app.use(history()) after 我的 api 路由来修复它，但 before 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

【讨论】：

非常感谢您发布您的答案。我尝试了一切，甚至没有考虑这里的订购。仍然有点困惑为什么这必须超越静态资源，但很高兴这是有效的！ =)