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

Posted 2023-02-22

【中文标题】ExpressJS - 为通用 Nuxt 应用程序和 AngularJS SPA 提供服务

【英文标题】：ExpressJS - Serve both universal Nuxt app and AngularJS SPA

【发布时间】：2019-07-25 17:16:04

【问题描述】：

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

服务器 - 用 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 中传递项目的公共部分，特别是使用 Nuxt 从服务器端渲染中受益。我是 Nuxt 的新手，所以还不了解这个框架的每一个细节。

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

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

【参考方案1】：

建议在中间件末尾调用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));
  
);

希望对你有帮助！

【参考方案2】：

我使用 express 静态文件来完成您的要求，如果您想阅读更多内容，您可以在 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/">

我希望它对你有用！

【讨论】：

谢谢Felipe，但我已经（管理到单页应用程序）并且它运行良好。我想将一个 SPA 传递给一个通用应用程序（使用服务器端渲染），我的疑问是：如何配置我的服务器来做到这一点？