如何使用 Vue Router 配置 Express 应用程序？答案

【问题标题】：How to configure Express app with Vue Router?如何使用 Vue Router 配置 Express 应用程序？
【发布时间】：2019-07-18 16:46:30
【问题描述】：

我正在构建一个基于 Express 的应用程序，其工作方式如下：

'/' 由 Express 和 pug 模板引擎提供的静态主站点
'/admin' 管理面板由 VueJS 在历史模式下使用 Vue Router 处理

目前，如果我转到 '/admin/about'，它可以正常工作，但是当我刷新页面时，它会引发 404 错误。如何将服务器配置为使用 Vue Router 处理所有管理路由（'/admin/xxx'），但使用 Express 处理所有主站点路由（就像目前一样）？

我尝试使用 connect-history-api-fallback 中间件，但没有成功。

app.js

const path = require('path');

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

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

const adminRoutes = require('./routes/admin');
const publicRoutes = require('./routes/index');

app.set('view engine', 'pug');
app.set('views', 'views');

app.use(bodyParser.urlencoded({
    extended: false
}));

app.use(express.static(path.join(__dirname, 'public')));

app.use('/admin', adminRoutes);

app.use(publicRoutes);

app.use(history());

app.use((req, res, next) => {
    res.status(404).render('404', {
        pageTitle: 'Page Not Found'
    });
});

app.listen(3000);

routes/index.js

const express = require('express');

const router = express.Router();

router.get('/', (req, res, next) => {
    res.render('home/index', {
        pageTitle: 'Lorem Ipsum',
        path: '/'
    });
});

module.exports = router;

routes/admin.js

const express = require('express');

const router = express.Router();

router.get('/', (req, res, next) => {
    res.render('admin/index', {
        pageTitle: 'Admin Panel',
        path: '/'
    });
});

module.exports = router;

【问题讨论】：

标签： node.js express

【解决方案1】：

您当前的配置仅处理管理员 SPA 的根路径 /（因此，如果您尝试刷新页面，则在除根之外的所有管理页面上都会得到 404）。您可以在您的路由中使用 /* 而不是 / 允许客户端上的 Vue 应用程序“处理”所有管理员 URL（甚至是 404 错误）。

但是 http 状态码会出现问题，因为（正如您可能猜到的）服务器总是会为每条路由返回 200 ......但我认为大多数开发人员对此表示满意，只是显示一些 404-page-component如果没有与 url 匹配的组件，则为用户。

如果您想在浏览器中看到正确的 http 代码以实现 Web 一致性、调试、项目要求或其他方面 - 如果没有 SSR，我认为您将不得不在后端重复您的客户端路由。

【讨论】：