在现有 Nuxt.js 项目中使用 Express.js

Posted 2023-02-22

【中文标题】在现有 Nuxt.js 项目中使用 Express.js

【英文标题】：Use Express.js in an existing Nuxt.js project

【发布时间】：2018-12-04 07:50:29

【问题描述】：

我有一个使用 Nuxt.js 构建的项目，我想使用 express 来报告我的 asyncData 方法等的 bugsnag 错误。

我将如何导入它？我想并不像 npm install express --save 那样简单。

我已经有一个用 php 编写的 api，所以我不会将它用作 api 或其他任何东西。

是不是有点矫枉过正？或者它是一种必要的邪恶？ :D

【参考方案1】：

要开始在现有 Nuxt 项目中使用 Express，您需要设置一个简单的 server.js 文件，用于设置 Express 服务器并将 Nuxt 应用程序添加为中间件。唯一轻微的复杂性是将其设置为在开发中自动重建。这是一个简单的示例 server.js 文件，该文件在非生产环境中引入 Nuxt 并处理构建。

const  Nuxt, Builder  = require('nuxt');
const app = require('express')();


// We instantiate Nuxt.js with the options
const isProd = process.env.NODE_ENV === 'production';
const config = require('./nuxt.config.js');

config.dev = !(isProd);
const nuxt = new Nuxt(config);

// No build in production
if (!isProd) 
  const builder = new Builder(nuxt);
  builder.build();

app.use(nuxt.render);
app.listen(3000);
console.log('Server is listening on http://localhost:3000');

然后，您可以像往常一样在 express 中合并 bugsnag，我假设需要它并将其作为中间件包含在内。

【讨论】：

为什么你只想在开发环境中构建？如果您将 config.dev 设置为 false，Builder 将开始生产构建。如果我不先构建我的应用，它就无法提供服务还是我错了？

【参考方案2】：

您不需要 express 来处理 asyncData 中的错误。要处理 s-s-r 上的 asyncData/fetch 中的错误，您只需要挂钩到 render:errorMiddleware。例如，请参阅sentry plugin 以获取 nuxt

但它只会捕获发生在 s-s-r 上的错误。不幸的是，在客户端上不会捕获任何东西（以及快递不会为客户端做任何事情）。 nuxt 中有一个错误，请参阅here