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__,如果感兴趣它是怎么来的,可以按照上面的方法进行搜索,应该是在这里:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/427565.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数组A[m+n]中存放了两个线性表(a1,a2,.....am)和(b1,b2.....bn),将数组中的两个线性表的位置互换,要求空间复杂度为1

要求空间复杂度为O(1),那么不可以借助辅助数组来完成此操作 算法思路:可先将此数组逆置变成bn,......b1,am,....,a1,然后分别逆转两个线性表的数据元素 算法实现 1、定义一个函数,该函数的功能是可以对一个数组的任意连续的部分进…

JS之打地鼠案例

需要素材的同学可以私信我 效果图&#xff1a; 上代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 320px;heigh…

DAY08_SpringBoot—整合Mybatis-Plus

目录 1 MybatisPlus1.1 MP介绍1.2 MP的特点1.3 MybatisPlus入门案例1.3.1 导入jar包1.3.2 编辑POJO对象1.3.3 编辑Mapper接口1.3.4 编译YML配置文件1.3.5 编辑测试案例 1.4 MP核心原理1.4.1 需求1.4.2 原理说明1.4.3 对象转化Sql原理 1.5 MP常规操作1.5.1 添加日志打印1.5.2 测…

搭建Android开发环境—— 熟悉Android开发工具,掌握Android移动端开发环境的搭建、项目导入,并能够将项目部署到模拟器和真机进行测试。

搭建Android开发环境 一、实验目的 熟悉Android开发工具&#xff0c;掌握Android移动端开发环境的搭建、项目导入&#xff0c;并能够将项目部署到模拟器和真机进行测试。 二、实验设备及器件 1、JDK1.8安装包 2、Android Studio安装包 三、实验内容 完成JDK和Android Stud…

WPF多值转换器

背景&#xff1a;实现Slider拖动可以调整rgb 单转换器&#xff1a;WPF中数据绑定转换器Converter-CSDN博客 在View中&#xff1a; <StackPanel Orientation"Vertical"><Slider x:Name"slider_R" Minimum"0" Maximum"255" Wi…

MySQL视图特性

视图是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据。视图的数据变化会影响到基表&#xff0c;基表的数据变化也会影响到视图。 1.基本使用 创建视图 create view 视图名 as select 语句&#xff1b; 案例&…

微信双开bat脚本中出现中文目录导致报错运行不了

在微信双开bat脚本的教程中看到一个评论&#xff1a; 可以是可以&#xff0c;写完脚本另存为的时候改变编码就行了&#xff0c;选ANSI

Socket实现服务器和客户端

Socket 编程是一种用于在网络上进行通信的编程方法&#xff0c;以下代码可以实现在不同主机之间传输数据。 Socket 编程中服务器端和客户端的基本步骤&#xff1a;服务器端步骤&#xff1a; 1.创建 Socket&#xff1a; int serverSocket socket(AF_INET, SOCK_STREAM, 0);…

java抽象工厂实战与总结

文章目录 一、工厂模式&#xff08;三种&#xff09;1.简单工厂模式1.1 概念&#xff1a;1.2 使用场景&#xff1a;1.3 模型图解&#xff1a;1.4 伪代码&#xff1a; 2.工厂方法模式2.1 概念&#xff1a;2.2 使用场景&#xff1a;2.3 模型图解&#xff1a;2.4 伪代码 3.抽象工厂…

3.chrony服务器

目录 1. 简介 1.1. 重要性 1.2. Linux的两个时钟 1.3. 设置日期时间 1.3.1. timedatectl命令设置 1.3.2. date命令设置 1.4. NTP 1.5. Chrony介绍 2. 安装与配置 2.1. 安装&#xff1a; 2.2. Chrony配置文件分析 2.3. 同步时间服务器 2.3.1. 授时中心 2.3.2. 实验…

进程通信与socket编程实践之猜数字小游戏

socket是实现进程通信的一种重要方式&#xff0c;本文将通过socket编程实现服务器进程与客户端进程之间的通信&#xff0c;并在通信之外实现猜数字的小游戏。 1. 设计思路 本文设计的C/S结构的猜数字游戏功能如下&#xff1a;服务器端自动生成一个1-100之间的随机数字&#x…

5.ROC-AUC机器学习模型性能的常用的评估指标

最近回顾机器学习基础知识部分的时候&#xff0c;看到了用于评估机器学习模型性能的ROC曲线。再次记录一下&#xff0c;想起之前学习的时候的茫然&#xff0c;希望这次可以更加清晰的了解这一指标。上课的时候听老师提起过&#xff0c;当时没有认真去看&#xff0c;所以这次可以…