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

一、问题描述

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第1张图片
根据图中提示,应该是在请求某个/_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目录。

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第2张图片
Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第3张图片

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

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

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

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第4张图片
可以看到这么一段设置:

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

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第5张图片

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

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第6张图片

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

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

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第7张图片

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

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

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

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第8张图片

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

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第9张图片
里面也出现了上面提到的buildAssetsDir : "/_nuxt/",但在文档中却搜索不到__NUXT__,如果感兴趣它是怎么来的,可以按照上面的方法进行搜索,应该是在这里:

Nuxt3:/_nuxt/xxx.mjs请求502问题引发的_nuxt实际指向探究_第10张图片

你可能感兴趣的:(#,Vue开发问题,开发问题,#,Node开发问题,前端,Nuxt)