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

Question

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

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

我已经有一个 api 写在 PHP 中，所以我不会将其用作 api 或其他任何东西。

是不是矫枉过正了？或者这是一个必要的邪恶？ :D

Answer 1

您不需要 express 来处理 asyncData 中的错误。要在 ssr 上处理 asyncData/fetch 中的错误，您只需要连接到 render:errorMiddleware。参见 sentry plugin 例如 nuxt

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

Answer 2

要开始将 Express 与现有的 Nuxt 项目结合使用，您需要设置一个简单的 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，我假设需要它并将其作为中间件包含在内。

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

Use Express.js in an existing Nuxt.js project

vue.js

error-handling

nuxt.js

server-side-rendering

bugsnag