javascript - ExpressJS - 为通用 Nuxt 应用程序和 AngularJS SPA 提供服务

标签 javascript node.js express vue.js nuxt.js

我有一个具有这种结构的博客项目:

  • 服务器 - 用 Node/Express 编写
  • 管理员 - AngularJS SPA
  • 公共(public) - AngularJS SPA(目前)

admin 和 public 部分具有相同的域,但 admin 部分使用不同的子域,这允许我在 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 中传递项目的公共(public)部分,特别是使用 Nuxt 来受益于服务器端渲染。我是 Nuxt 的新手,所以还不了解这个框架的每一个细节。

我看到可以提供 universal app with Express ,但我不知道如何使其与我当前的解决方案兼容。

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

最佳答案

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/

首先,在“公共(public)部分”调用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));
  }
});

希望对您有所帮助!

关于javascript - ExpressJS - 为通用 Nuxt 应用程序和 AngularJS SPA 提供服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54982462/

相关文章:

javascript - 如果用户已经登录,则 Conceal FB 登录按钮

javascript - 发送文件给客户端下载

javascript - 使用 jQuery 或 CSS 时,多级/树选择器是否有合理的值(value)?

javascript - 图像文件夹中的图像未加载到 mobilefirst 中

angularjs - NodeJS Express Req.Body 未定义

node.js - 满足条件时取消所有 Protractor 测试

node.js - 我应该将当前用户存储在 node.js 中的什么位置?

javascript - 我可以知道一个javascript文件是否已经被执行了吗?

单击按类更改宽度的 JavaScript

javascript - expressjs : get requested url