推荐最新

nuxt2如何在nuxt.config.js中直接捕获服务端错误?

如题,项目前端是nuxt2做的,现在遇到如下问题当通过非正常编码编码后的url 访问的时候, pm2日志中报错 "URI malformed" 探究了一下,错误是因为 /node_moduels/@nuxt/server/dist/server.js 文件中的 const nuxtMiddleware = ({ options, nuxt, renderRoute, resources }) => async function nuxtMiddleware (req, res, next) { // Get context const context = utils.getContext(req, res); try { const url = decodeURI(req.url); //这里 res.statusCode = 200; const result = await renderRoute(url, context); // If result is falsy, call renderLoading if (!result) { await nuxt.callHook('server:nuxt:renderLoading', req, res); return } await nuxt.callHook('render:route', url, result, context); const { html, cspScriptSrcHashes, error, redirected, preloadFiles } = result; if (redirected && context.target !== utils.TARGETS.static) { await nuxt.callHook('render:routeDone', url, result, context); return html } if (error) { res.statusCode = context.nuxt.error.statusCode || 500; } if (options.render.csp && cspScriptSrcHashes) { const { allowedSources, policies } = options.render.csp; const isReportOnly = !!options.render.csp.reportOnly; const cspHeader = isReportOnly ? 'Content-Security-Policy-Report-Only' : 'Content-Security-Policy'; res.setHeader(cspHeader, getCspString({ cspScriptSrcHashes, allowedSources, policies, isReportOnly })); } // Add ETag header if (!error && options.render.etag) { const { hash } = options.render.etag; const etag = hash ? hash(html, options.render.etag) : generateETag__default['default'](html, options.render.etag); if (fresh__default['default'](req.headers, { etag })) { res.statusCode = 304; await nuxt.callHook('render:beforeResponse', url, result, context); res.end(); await nuxt.callHook('render:routeDone', url, result, context); return } res.setHeader('ETag', etag); } // HTTP2 push headers for preload assets if (!error && options.render.http2.push) { // Parse resourceHints to extract HTTP.2 prefetch/push headers // https://w3c.github.io/preload/#server-push-http-2 const { shouldPush, pushAssets } = options.render.http2; const { publicPath } = resources.clientManifest; const links = pushAssets ? pushAssets(req, res, publicPath, preloadFiles) : defaultPushAssets(preloadFiles, shouldPush, publicPath, options); // Pass with single Link header // https://blog.cloudflare.com/http-2-server-push-with-multiple-assets-per-link-header // https://www.w3.org/Protocols/9707-link-header.html if (links.length > 0) { res.setHeader('Link', links.join(', ')); } } // Send response res.setHeader('Content-Type', 'text/html; charset=utf-8'); res.setHeader('Accept-Ranges', 'none'); // #3870 res.setHeader('Content-Length', Buffer.byteLength(html)); await nuxt.callHook('render:beforeResponse', url, result, context); res.end(html, 'utf8'); await nuxt.callHook('render:routeDone', url, result, context); return html } catch (err) { if (context && context.redirected) { consola__default['default'].error(err); return err } if (err.name === 'URIError') { //这里 err.statusCode = 400; } next(err); } }; 其中 const url = decodeURI(req.url); 对url无法进行解析,导致的. 需求是想在遇到"URI malformed"错误的时候,直接跳首页,目前采用了两种做法解决第一种: 在nuxt.config.js文件中,增加 serverMiddleware 配置项 serverMiddleware: [ (req, res, next) => { // 自定义中间件逻辑... try { //尝试解析url decodeURIComponent(req.url) //往下继续执行 next(); } catch { //解析错误就跳转 res.writeHead(302, { Location: '/' }); res.end(); } } ], 这样可以解决,但是无法阻止server.js 文件会对url再次进行解析,这样比较消耗资源第二种: 直接修改 /node_moduels/@nuxt/server/dist/server.js 文件在 if (err.name === 'URIError') { err.statusCode = 400; } 中加入: if (err.name === 'URIError') { err.statusCode = 400; //新加 res.writeHead(302, { Location: '/' }) //新加 return res.end() } 这样也能起到效果,但是这样就直接修改了核心代码第三种: 使用nuxt.config.js 中的hook,示例如下 hooks: { render: { errorMiddleware(app) { app.use((error, req, res, next) => { res.writeHead(302, { Location: '/', }) res.end() }) }, }, 这样也可以,似乎更恰当一些但是对于负载来说, 是重定向到首页好,还是直接返回错误页,还是直接返回错误提示更好呢?

浏览量304

0offer糕手

安装nuxtjs失败， Error: Failed to download template from registry: fetch failed？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/34811ba1651729580a8179438e911daa.png) 各种方法都试了什么：185.199.108.133 raw.githubusercontent.com 什么114.114.114.114 而且我能科学上网，就这，还是提示 ERROR Error: Failed to download template from registry: fetch failed

浏览量188

超好看鸭

nuxt.js 使用vue-awesome-swiper提示getComputedStyle' on 'Window': parameter 1 is not of type 'Element'?

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240928/46a4a7b9d62960ef92d735c73ea5f126.png) nuxt.js 使用vue-awesome-swiper提示Failed to execute getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 代码如下：网上有人说class需要使用swiper-wrapper，但是还不行,"@slideChange="onSlideChange""也没出发

浏览量205

雾里

vue2的 ssr 渲染 nuxt.js 使用vue-awesome-swiper新老数据混合存在怎么回事？

vue2 使用vue-awesome-swiper3.1.3，服务端渲染nuxt.js, 我擦，坑是真特么多，一步一个坑，坑死人了。现在是数据更新后，新老数据都存在，导致，activeIndex，realIndex 都不对。有人遇到过吗？如何解决？

浏览量203

大厂球袋

Vue-router history模式下如何使用相对路径进行打包？

按照Vue-router官网，history路由模式下，publicPath无法使用相对路径，需要router里base配对对应路径/url。但现在项目有个需求是前端打一份包，放在两个路径下: "http://111.11.11.1/urlA/" (https://link.segmentfault.com/?enc=qb7b1HGip%2FKwhF4nIN56kw%3D%3D.QOuoIrGdrCb4eGbWLYtEu2abO4AABEdglMHMkcNSQpA%3D) "http://111.11.11.1/urlB/" (https://link.segmentfault.com/?enc=y%2BlZkNdFpzi%2FRqLuUPqJCg%3D%3D.X1cBFcyQqqOPxMYjgic2nS14VDnUGpNz7u2J6Trb8FI%3D) 前端项目路由模式是history，只打一份包的话只能配置一个base，如何满足这种需求？尝试过将publicPath和base都配成相对路径的形式，在页面上能拿到js且js路径正确，但是js不执行...

浏览量191

一本正经写代码

帮看一段关于ts类型的代码?

"https://nuxt.com/docs/guide/directory-structure/error" (https://link.segmentfault.com/?enc=pvzCkZNIBerskSYATlCxUA%3D%3D.c7LTqVDzpNX9fPADQN39yiKtmtQOHVZ6%2BJmCwcVEt8OP2aBh2WaG%2Fp2wM53TqAhpKILsDtUq16Hk2RgmKl8sFA%3D%3D) import type { NuxtError } from '#app' const props = defineProps({ error: Object as () => NuxtError }) {{ error.statusCode }} Go back home 上面这段代码如何理解？ 1. error: Object as () => NuxtError 这个有点蒙，试着能理解，就是定义 error的类型是一个函数，该函数返回NuxtError 是这样吗？ 2. 既然error是一个函数类型，为什么模板中是直接访问 statusCode属性？而不是使用error()函数？ 3. 试着写了一下提示error可能未定义 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240927/c14a96d9620baa8388c181893c75b957.png)

浏览量189

饼干爱折腾

vue使用externals分离依赖，同时我想使用动态获取最快CDN来加载，要怎么实现呢？

webpack配置： externals = { vue: 'Vue', axios: 'axios' } 正常是在html中使用固定的cdn链接加载： .... 以上是没问题的，但是国内cdn不稳定，我想从多个cdn中使用最快的cdn，于是我写了个函数： loadFastCdnScripts() { // 此处动态判断多个cdn链接速度，选择最快的cdn来并添加到头部，此处代码实现没问题 } 我不知道该把loadFastCdnScripts函数放在哪执行？怎么让Cdn加载完后才加载主程序呢？因为运行总是报Vue is undefined，似乎主程序总是优先于cdn加载

浏览量161

加班使我熟睡

不可否认的是，React&Next.js 的发展应该远好于 Vue&Nuxt.js吧 ?

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240927/0c6384e5cbec9ed2e544c80c36185b2d.png)

浏览量145

疯狂的搬运工

nuxt3服务端渲染时，接口被重复请求2次如何解决？

关于nuxt3版本，服务端渲染，重复2次请求的问题？最近重构一个工具站点，使用了nuxt.js 版本3.12.2。通过查看后端日志，服务端渲染请求接口，每次都会发送2次。 https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/8958821d345a21a6b1bd93dfd954c6e1.png 服务端一个接口请求2次，客户端无请求。 https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240923/f9ea190f4b024ae54a1e1ca7e35a9dca.png 当前页面加载一次分类数据，一次首页数据。日志记录，每个数据接口是同时发生了两次请求。看过不少相关问题的解决文档，大多数都说使用 useAsyncData 请求的使用加上 key 参数，试过后也解决不了问题。

浏览量143

你可以的拿捏了

nuxtjs2.x server 和client的数据共享？

场景：在使用nuxtjs 服务器渲染的时候接口数据都是"asyncData"进行请求的，之前用户在页面输入了一些数据等，前端这边都是缓存到"localStorage" 页面刷新的时候还可以拿到，现在的问题：页面刷新的时候客户端操作的数据如何实现服务器数据共享呢？有什么好的思路吗？我想到过用cookie？但是太小了不能满足我的需求

浏览量28