Question

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

'/'静态主站点提供服务
“ / 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;

Answer 1

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

但是http状态代码会出现问题，因为（您可能已经猜到了）服务器将始终为每个路由返回200 ...但是我认为大多数开发人员都可以接受，并且只显示一些404页的组件如果没有与网址匹配的组件，则为用户提供。

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

如何使用Vue路由器配置Express应用？

1 个答案: