Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究

一、问题描述

今天后台的小伙伴给我发了一张图:

在这里插入图片描述
根据图中提示,应该是在请求某个/_nuxt/xxx.mjs的时候报错了,如果单独在浏览器访问该文件路径也是能访问到的,那有可能就是访问量比较大,服务器响应不过来导致的,这个暂且不论。我好奇的是,在寻找/_nuxt/xxx.mjs文件的时候,并未发现有_nuxt这样的物理目录存在,那么它到底映射到哪里呢?

二、问题探究

_nuxt这样的物理目录不存在,而nuxt build实际生成的构建产物的目录是.nuxt,关于.nuxt的描述,可以看一下官网文档

The .nuxt directory is the so-called build directory. It is dynamically generated and hidden by default. Inside the directory you can find automatically generated files when using nuxt dev or your build artefacts when using nuxt build. Modifying these files is great for debugging but remember that they are generated files and once you run the dev or build command again, anything that was saved here will be regenerated.

简而言之,就是该.nuxt目录就是所谓的构建目录。它是在nuxt dev或者nuxt build的时候动态生成的隐藏目录。

并且在.nuxt\dist\client目录下,也找到了/_nuxt/xxx.mjs路径下的相同文件,那么初步可以判断_nuxt其实指向的就是.nuxt\dist\client目录。

为了验证这个想法,首先先去官方文档找找看:

在这里插入图片描述
在这里插入图片描述

_nuxt搜索,找到了buildAssetsDir配置项,应该是与构建出来的静态资源目录有关,但文档似乎没有更多的解释。

到此,.nuxt_nuxt都在文档里出现了,但没有找到更多的说明。那么就只能硬着头皮直接搜代码了:

(1)首先准备一下工具:NotePad++

(2)按如下截图步骤进行搜索:

在这里插入图片描述
可以看到这么一段设置:

publicAssets: [
	{
  	 	baseURL: nuxt.options.app.buildAssetsDir,
   		dir: resolve(nuxt.options.buildDir, "dist/client")
 	},
 ...
],

nuxt.options.buildDir这个是什么值呢?我们再去文档里看看:

在这里插入图片描述

那么,到这里就可以看到_nuxt其实指向的就是.nuxt\dist\client

可能你还对上面的publicAssets配置内容是怎么起作用的有所疑问,那么我们接着往下看:

在这里插入图片描述

publicAssets 所在的对象是作为createNitro构造函数的配置项。而createNitro来自于nitropack

import { createNitro, ... } from 'nitropack'

nitropack包的README.md文件里找到了相关的文档:https://nitro.unjs.io

在这里插入图片描述

publicAssets 表示公共资源的目录名称,通常用于存放静态文件如图片、样式表和脚本文件。

baseUrl 是公共资源的基本 URL,用于访问公共资源的路径。

dir 是公共资源的实际存放目录,通常是相对于项目根目录的路径。

注:这个Nitro,是Nuxt3的服务器引擎(Server engine: nitro)

在这里插入图片描述

最后,顺便提一个在探究过程中遇到的特别的变量__NUXT__

在这里插入图片描述
里面也出现了上面提到的buildAssetsDir : "/_nuxt/",但在文档中却搜索不到__NUXT__,如果感兴趣它是怎么来的,可以按照上面的方法进行搜索,应该是在这里:

在这里插入图片描述

  • 22
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓风伴月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值