如何配置Vue路由器的Express应用程序？

Question

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

• 使用pug模板引擎的Express服务的静态主站点
• '/ admin‘管理面板由VueJS在历史模式下使用Vue路由器处理

目前，如果我转到'/admin/about‘，它可以正常工作，但是当我刷新页面时，它会抛出404错误。如何将服务器配置为使用Vue路由器处理所有管理路由('/ 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;

Answer 1

当前的配置只处理admin SPA的根路径/ (因此在所有管理页上都有404，如果您试图刷新页面，除了根)。您可以允许Vue应用程序在客户端“处理”所有管理urls (甚至是404个错误)，在您的路由中使用/*而不是/。

但是http状态代码会出现问题，因为(正如您可能猜到的)服务器总是为每条路由返回200 .但是，我认为大多数开发人员都同意这一点，如果没有与url相匹配的组件，那么只需为用户显示404页组件。

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