ExpressJS-服务通用Nuxt应用程序和AngularJS SPA [英] ExpressJS - Serve both universal Nuxt app and AngularJS SPA

问题描述

我有一个结构如下的博客项目:

I have a blog project with this structure:

• 服务器-用Node/Express编写
• admin-AngularJS SPA
• public-AngularJS SPA(目前)

管理部分和公共部分具有相同的域，但是管理部分使用不同的子域，这使我可以在Express中为这样的应用程序提供服务:

The admin and public parts have the same domain, but the admin part uses a different subdomain, which allows me to serve the app like this in 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.

This solution works fine. It captures all requests and serve the right index.html for each subdomain.

问题-> 我想在VueJS中传递项目的公开部分，特别是使用 Nuxt 来受益于服务器端渲染.我是Nuxt的新手，所以还不了解该框架的每个细节.

PROBLEM -> I would like to pass the public part of the project in VueJS, and specifically using Nuxt to benefit from server-side rendering. I'm new to Nuxt so don't understand yet every details of this framework.

我发现可以通过Express服务通用应用，但是我不知道该如何制作与我当前的解决方案兼容.

I saw it is possible to serve an universal app with Express, but I have no idea of how to make it compatible with my current solution.

任何帮助将不胜感激！ 谢谢

Any help would be appreciated! Thanks

推荐答案

建议在中间件结尾处调用nuxt.render，因为它将处理Web应用程序的呈现，并且不会调用next()- https://nuxtjs.org/api/nuxt-render/

It's recommended to call nuxt.render at the end of your middlewares since it will handle the rendering of your web application and won't call next() - https://nuxtjs.org/api/nuxt-render/

首先，在公共部分"中调用next().

First, call next() in the "Public part".

第二，在下面添加nuxt中间件.

Second, add the nuxt middleware below.

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);

---

另一个也可行的示例.

---

Another example that also works.

// 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));
  }
});

希望对您有帮助！

这篇关于ExpressJS-服务通用Nuxt应用程序和AngularJS SPA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！