ExpressJS - обслуживает как универсальное приложение Nuxt, так и AngularJS SPA - PullRequest
Новая
       13

ExpressJS - обслуживает как универсальное приложение Nuxt, так и AngularJS SPA

0 голосов
/ 04 марта 2019

У меня есть проект блога с такой структурой:

  • сервер - написан на Node / Express
  • admin - AngularJS SPA
  • public - AngularJS SPA (длямомент)

Административная и общедоступная части имеют один и тот же домен, но административная часть использует другой поддомен, что позволяет мне обслуживать приложение в Express следующим образом: 

app.get('*', (req, res) => {
  var firstIndex = req.get('host').indexOf('.');
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain === '') {
    // Public part
    res.sendFile(path.join(__dirname, '../public', 'index.html'));
  } else if (subdomain.indexOf('admin') !== -1) {
    // Admin part
    res.sendFile(path.join(__dirname, '../admin/js', 'index.html'));
  } else {
    // Static files
    res.sendFile(path.join(__dirname, '../', req.url));
  }
});

Это решение отлично работает.Он захватывает все запросы и обслуживает правильный index.html для каждого субдомена.

ПРОБЛЕМА -> Я хотел бы передать открытую часть проекта в VueJS и, в частности, использовать Nuxt для получения выгоды от рендеринга на стороне сервера.Я новичок в Nuxt, поэтому пока не разбираюсь во всех деталях этой платформы.

Я видел, что можно обслуживать универсальное приложение с Express , но я понятия не имею, какчтобы сделать его совместимым с моим текущим решением.

Любая помощь будет принята с благодарностью!Спасибо

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

Рекомендуется вызывать nuxt.render в конце вашего промежуточного программного обеспечения, поскольку оно будет обрабатывать рендеринг вашего веб-приложения и не будет вызывать next() - https://nuxtjs.org/api/nuxt-render/

Во-первых, вызовите next () в «Публичной части».

Во-вторых, добавьте промежуточное ПО nuxt ниже. 

app.get('*', (req, res, next) => {
  var firstIndex = req.get('host').indexOf('.');
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain === '') {
    // Public part, call next() to use the nuxt middleware!
    next();
  } else if (subdomain.indexOf('admin') !== -1) {
    // Admin part
    res.sendFile(path.join(__dirname, '../admin/js', 'index.html'));
  } else {
    // Static files
    res.sendFile(path.join(__dirname, '../', req.url));
  }
});

// The nuxt middleware
app.use(nuxt.render);

Другой пример, который также работает. 

// If Public part, response Nuxt server render app.
app.use((req, res, next) => {
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain === '') {
    // Public part, call nuxt.render middleware
    nuxt.render(req, res, next);
  } else {
    next();
  }
});

// admin / static files
app.get('*', (req, res, next) => {
  var firstIndex = req.get('host').indexOf('.');
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain.indexOf('admin') !== -1) {
    // Admin part
    res.sendFile(path.join(__dirname, '../admin/js', 'index.html'));
  } else {
    // Static files
    res.sendFile(path.join(__dirname, '../', req.url));
  }
});

Надеюсь, это поможет!

0 голосов
/ 07 марта 2019

Я использовал экспресс-статические файлы, чтобы сделать то, что вы просите, если вы хотите прочитать больше, вы можете сделать это по http://expressjs.com/en/starter/static-files.html

Прежде всего, в вашем файле "app.js" вынеобходимо добавить следующие две строки: 

app.use('/public', express.static(__dirname +'../public'));
app.use('/admin', express.static(__dirname +'../admin/js'));

После этого вам нужно проверить index.html из обоих интерфейсных проектов и убедиться, что у каждого из них есть правильный базовый href.Например,

public / index.html должен иметь: 

<base href="/public/">

admin / index.html должен иметь: 

<base href="/admin/">

Надеюсь, это сработает для вас!

...