Question

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

服务器-用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的新手，所以还不了解该框架的每个细节。

我看到可以使用universal app with Express，但是我不知道如何使其与当前解决方案兼容。

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

Answer 1

建议在中间件结尾处调用nuxt.render，因为它将处理Web应用程序的呈现，并且不会调用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));
  }
});

希望对您有帮助！

Answer 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/">

我希望它对您有用！

ExpressJS-服务于通用Nuxt应用程序和AngularJS SPA

2 个答案: