Как настроить приложение Express с Vue Router? - PullRequest
0 голосов
/ 25 февраля 2019

Я создаю приложение на основе Express, которое работает следующим образом:

  • '/' статический основной сайт, обслуживаемый Express с механизмом шаблонов pug
  • '/ admin' панель администратораобрабатывается VueJS с Vue Router в режиме истории

В настоящий момент, если я перехожу к '/ admin / about' , он работает нормально, но когда я обновляю страницу, он выдаетОшибка 404Как настроить сервер для обработки всех административных маршрутов ('/ admin / xxx') с помощью Vue Router, но все основные маршруты сайтов с помощью 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);

routs / 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;

маршруты / 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;

1 Ответ

0 голосов
/ 25 февраля 2019

Ваша текущая конфигурация обрабатывает только корневой путь / для администратора SPA (так что вы получите 404 на всех страницах администратора, кроме корневого, если вы попытаетесь обновить страницу).Вы можете разрешить обработку всех URL-адресов администратора приложением Vue на клиенте (даже 404 ошибки) с /* вместо / в вашем маршруте.

Но возникнет проблема с кодами состояния httpпотому что (как вы, наверное, догадались) сервер всегда будет возвращать 200 для каждого маршрута ... но я думаю, что большинство разработчиков согласны с этим и просто показывают какой-то 404-страничный компонент для пользователя, если нет ни одного компонента, соответствующего URL.

Если вы хотите видеть правильные http-коды в вашем браузере для согласованности в сети, отладки, требований проекта или чего-то еще - без SSR, вам придется повторить маршруты вашего клиента в серверной части, я думаю.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...