我有一个具有这种结构的博客项目:
- 服务器 - 用 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 callnext()
- 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/