Vue3+vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案 本篇博客旨在填补去年遇到的一个技术坑。...说实话这种情况非常令人迷惑,要是所有图片都无法加载那还好理解,可是我图片统一放在public文件夹,打包后也检查了确实都存在,然后部分图片无法获取,这是为什么呢?...在开发环境中,Vite 会根据根路径(base)自动解析资源路径,但当通过反向代理部署时,代理服务器可能会为项目添加一个子路由路径(根据nginx的配置来决定)。...具体来说,当我们使用动态路径时,Vite 默认将其视为相对于项目根路径来解析,但当反向代理添加了子路由路径后,动态路径没有考虑到这个变化,最终导致图片无法加载。...这样,动态渲染时只需要从已加载的图片数组中获取资源,避免了路径解析的问题。
throw new Exception(‘用户不存在’, ‘404’); } code… if (…) { ...所以,我们在写上游代码时异常直接抛出即可。...我通常会像下面这么写,为什么?因为我认为在这种上下文的环境中format和doSomething的一个子集。...,可能绝大多数else代码里都是在处理异常情况,更有可能这个异常代码特别简单,通常我会这么去做: “` // 如果是在一个函数里面我会先处理异常的情况,然后提前return代码,最后再执行正常的逻辑 function...操作 最后我想说的是永远拒绝在你的Controller里直接操作DB,为什么?
throw new Exception('用户不存在', '404'); } code... if (...) { // 密码错误 throw new Exception('密码错误', '400')...所以,我们在写上游代码时异常直接抛出即可。...我通常会向下面这么写,为什么?因为我认为在这种上下文的环境中format和doSomething的一个子集。 function doSomething() { ......,可能绝大多数else代码里都是在处理异常情况,更有可能这个异常代码特别简单,通常我会这么去做: // 如果是在一个函数里面我会先处理异常的情况,然后提前return代码,最后再执行正常的逻辑 function...操作 最后我想说的是永远拒绝在你的Controller里直接操作DB,为什么?
区分静态内容和动态内容,避免以后页面访问中不必要的HTTP请求。...16、尽早刷新输出缓冲 尤其对于css,js文件的并行下载更有意义 17、使用GET来完成AJAX请求 当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头...这就是为什么说使用event delegation(事件代理)是一种好方法了。如果你在一个div中有10个按钮,你只需要在div上附加一次事件句柄就可以了,而不用去为每一个按 钮增加一个句柄。...它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一 个404 Not Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被发送一次。...这个图片文件还会影响下载顺序,例如在IE中当你在 onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。
至于类加载机制,你要理解我们需要一个类加载器来加载上一步得到的.class文件到JVM虚拟机中,这样才能生成实例对象,了解这些就够了。...“还记得我们需要一个类加载器来加载步骤3生成的.class文件到JVM中吗?这个参数就是类加载器的一个实例,提供这个参数是让客户可以灵活地选择不同的类加载器来完成这个操作。”...但是先体会思想,之后我会让你看到最终动态生成的源码内容,你也就明白了下面的代码究竟做了什么。”...至于为什么用开头,因为JDK有个规范,在ClassPath下只要是开头的.class文件,一般都是自动生成的,我只是遵照了一下这个规范罢了。”...“第二个问题,目前这个版本的功能是要得到实现了任意接口的类的代理,并且当客户端传入的接口对象是Payable.class时,也得到了我们期望的运行结果。
然而,在配置Nginx时,难免会遇到404 Not Found的问题,这不仅影响用户访问体验,还可能导致业务中断。...符号链接问题:请求的资源是一个符号链接,但链接指向的目标不可用或没有权限。 文件不存在:请求的文件确实不存在。 ️.../404.html; location = /404.html { internal; } } 路径和文件名 确保配置文件中的root和index指令正确指向存在的路径和文件...html/index.html 符号链接问题 如果请求的资源是一个符号链接,确保链接指向的目标存在并且有适当的权限。...touch /var/www/html/index.html ❓ QA环节 Q: 为什么我修改了配置文件,还是404错误?
所以对Java程序员来说其中不乏说对 Spring Boot 非常熟悉的,然后当问到一些 Spring Boot 核心功能和原理的时候,没人能说得上来,或者说不到点上,可以说一个问题就问趴下了!...注意: 由于我们在WebInit中只是添加了SpringMVC的配置,这样项目在启动时只会去加载SpringMVC容器,而不会去加载 Spring 容器,如果一定要加载 Spring 容器,需要我们修改...路径 ,这个页面就不会展示出来,不过在 Spring Boot 中,提供/error 路径实际上是下下策,Spring Boot本身在处理异常时,也是当所有条件都不满足时,才会去找 /error 路径。...如果异常展示页面既存在 5xx.html,也存在 500.html ,此时,发生500异常时,优先展示 500.html 页面。...404.html 同时存在时,默认使用动态页面。
我们来看, try_files 指令的第一个参数 /foo 可以映射为文件 /var/www/foo,而 Nginx 在 try-files 阶段发现此文件确实存在,于是立即把当前请求的 URI 改写为这个参数的值...当“条件”都不满足时,它就会无条件地发起一个指定的“内部跳转”。...和 /bar/ 参数所对应的文件系统对象都不存在时,就直接返回 404 Not Found 错误页。...而经常地,404 错误页会抛出,除非运气太好,在对应路径上确实存在一个叫做 auth 的文件。...所以,一条经验是,当遇到意外的 404 错误并且又不涉及静态文件服务时,应当首先检查是否在对应的 location 配置块中恰当地配置了 content 阶段的模块指令,例如 content_by_lua
为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。...只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。...SPA 虽然在浏览器里游刃有余,但真要通过 URL 向后端发起 HTTP 请求时,两者的差异就来了。尤其在用户手动输入 URL 后回车,或者刷新(重启)浏览器的时候。...如果后端缺少对 /book/id 的路由处理,将返回 404 错误。...Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html
直接将这些请求交由同一个应用服务器处理存在以下问题:性能瓶颈:动态内容通常需要经过业务逻辑处理,增加了服务器负载。资源浪费:静态资源请求频繁,若占用动态服务器资源会影响整体响应速度。...逻辑分离静态与动态内容由同一服务器处理,通过 Web 服务器的规则进行区分。混合模式静态内容使用本地缓存或 CDN 加速,动态内容转发给后端服务器处理。为什么选择 Nginx?...}静态文件发布时通过文件名加版本号 (main.1.0.js) 让用户端自动更新资源,而无需手动清理缓存。...优化后,静态文件直接由 Nginx 提供,省略了后端处理步骤;动态请求也因为后端负载减轻而得到更快的响应。最终实现了 响应时间从 200ms 缩短至 50ms 的效果。...用户满意度显著提升静态与动态内容分离后,网页的加载速度大幅提升,尤其是首屏加载时间得到改善。用户不再需要长时间等待页面加载,显著提升了用户体验。
1、ar是一个生成静态库的命令,第一个是打算生成的.a文件 后面跟着的是所有的.o文件 2、选项-rc(replace and create)的意思是如果目标静态库文件存在就替换,不存在就创建 2.2...——>因为你确实告诉了编译器动态库在那,他也帮你生成了可执行程序,而当你变成可执行程序之后,就和编译器一点关系也没有了,而你的可执行程序运行不了,是因为你也得告诉系统(加载器)你的动态库在哪!!...问题2:那为什么系统找得到C库却找不到我们的第三方库呢?? ——>因为不仅仅是编译,加载也需要提供路径!!...四、动态加载 4.1 动态库加载的底层原理 1、 当cpu执行代码正文部分的时候,当发现需要被调用的库函数,就会跳到共享区去查找,如果此时库文件还没有被加载进内存,就发生缺页中断,然后将动态库文件加载进来...4.3 动态库的地址 转成汇编后printf已经变成了地址,所以我们的cpu在执行的时候只认识编译时确定好的线性地址,所以我们必须需要保证我们的动态库确实已经加载到这个虚拟地址了,要不然就会找不到
从后台请求路由信息,以json格式返回给前端代码,实现动态加载,从控制台可以看到请求数据。 如果我需要新增一个Vue页面,只需要把这个vue文件放到项目的目录中,然后在数据库中新增一条路由信息。...), } 使用一个懒加载,当触发这个路由时,才会import加载。...如果这样实现的话,就需要调用addRoute(parent, router),我使用这种方法一直无法实现动态加载,后来就另辟蹊径就直接将路由全都放到一个层级,反正渲染菜单时用的是menuRule的层级关系...这个问题是刷新时,后台路由还没有动态加载导致的,以后有了后台,用api向后台请求路由信息就能解决这个问题。在后面Loading页面的实现时,我加了一条路由就把这个问题解决了,这里就先不纠结这个问题。...至于为什么为跳转到上个路由,是因为加载404之后,调用了router.back回到上个路由。
对的,你没有看错,当Transactional加载Controller层时出现404异常 第二种情况 Controller层代码如下 @RestController @RequestMapping("...区别 可以看出,我们两个Controller的区别就是一个有实现接口,一个没有实现,为什么差别会这么大呢? 2....那么为什么会发生404异常呢? 3....如果有,就建立相关的映射关系(URL->Handler) 其中有接口的是被JDK代理的,生成的是JDK代理类 JDK的动态代理是靠多态和反射来实现的,它生成的代理类需要实现你传入的接口,并通过反射来得到接口的方法对象...思考 如果Controller层不加@Transcational注解的时候,为什么又不会产生404异常呢?
之前对于 的理解也就限于这些了,后面学了服务器部署、nginx这些但还是一知半解。直到今天翻看 Vue CLI 文档时,突然对其原理有了新的理解。...不过,它在 SEO 中确实有不好的影响。其实也就跟我们正常在页面中使用的 a 标签锚点一样,只会影响前端页面。...去请求资源,但是我们平时用 vue、react 之类框架开发出的项目打包后是这个样子的:单页面应用也就一个 index.html 入口文件,其他的资源都是动态引入到 index.html 文件里的,当去向浏览器请求.../index/hello-world 资源时,正常是找不到的,也是 404,这也是 history 模式需要服务器配合设置的原因,就是把请求中所有没有匹配到的资源都默认给指向到 index.html...上去,这也是为什么需要服务器配置的原因。
但是JAVA有着一个非常突出的动态相关机制——Reflection(反射),用在Java身上指的是可以于运行时加载、探知、使用编译期间完全未知的classes。...这也是Java程序为什么是无关平台的所在,原因在于,java的源代码会被编译成.class文件字节码,只要装有Java虚拟机JVM的地方(Java提供了各种不同平台上的虚拟机制,第一步由Java IDE...Java的反射机制,操作的就是这个.class文件,首先加载相应类的字节码(运行eclipse的时候,.class文件的字节码会加载到内存中),随后解剖(反射 reflect)出字节码中的构造函数、方法以及变量...为什么new一个对象那么简单,非要用反射技术中的newInstance? 为什么,我可以直接对象a1. 变量访问变量,却非要用反射那么费劲的获得name字段呢?...obj = cls.newInstance(); //container表示Spring容器 container.put(idStr, obj); //当一个类里面需要用另一类的对象时
本例中被包裹的URL 是动态的。 当一个路由包含动态组件时,Flask将接受该部分URL中的任何文本,并将以实际文本作为参数调用该视图函数。...之前你见过通过调用all()来得到所有的结果的查询,或是调用first()来得到结果中的第一个或者结果集为空时返回None的查询。...在本视图函数中,我使用了first()的变种方法,名为first_or_404(),当有结果时它的工作方式与first()完全相同,但是在没有结果的情况下会自动发送404 error给客户端。...以这种方式执行查询,我省去检查用户是否返回的步骤,因为当用户名不存在于数据库中时,函数将不会返回,而是会引发404异常。...如果你想知道为什么在提交之前没有db.session.add(),考虑在引用current_user时,Flask-Login将调用用户加载函数,该函数将运行一个数据库查询并将目标用户添加到数据库会话中
什么自动化,镜像,容器,流水线布署,本质也是将这套逻辑抽象,隔离,用程序来代替重复性的劳动,本文不展开 二、404问题 这是一个经典的问题,相信很多同学都有遇到过,那么你知道其真正的原因吗?...我们先还原一下场景: vue项目在本地时运行正常,但部署到服务器中,刷新页面,出现了404错误 先定位一下,HTTP 404 错误意味着链接指向的资源不存在 问题在于为什么不存在?...为什么history模式下有问题 Vue是属于单页应用(single-page application) 而SPA是一种网络应用程序或网站的模型,所有用户交互是通过动态重写当前页面,前面我们也看到了,不管我们应用有多少页面...,所以就会出现 404 的情况 为什么hash模式下没有问题 router hash 模式我们都知道是用符号#表示的,如 website.com/#/login, hash 的值为 #/login 它的特点在于...JS来执行视图切换的, 当我们进入到子路由时刷新页面,web容器没有相对应的页面此时会出现404 所以我们只需要配置将任意页面都重定向到 index.html,把路由交由前端处理 对nginx配置文件.
这也就意味着我们需要一层一层的经过这个依赖树:解析一个文件,得到所依赖的文件,然后再查找和加载这些依赖。 如果主线程等待每个文件的下载,那么就会有很多其他的任务悬挂在队列里了。...当加载器开始拉取一个URL时候,它会将这个URL放入地图并且标记为正在拉取文件。然后他会发起请求,进入下一个文件的拉取。...如果另外的模块依赖了同样的文件,加载器将会查看地图中的每个URL,如果它看到了fetching的存在,它会直接进入下一个URL。...如何它是一个模块而且还有依赖,它就会开始一遍遍的处理直到所有的文件被拉取和解析。 但我们做完加载的环节,你就会从一个入口文件得到一批的模块记录。 下一步就是实例化模块,然后将所有的实例连接起来。...这样,如果一个模块导入了一个对象,它可以改变这个对象上属性的值。 之所以使用动态绑定的原因在于你后续可以在不运行任何代码的情况下连接所有的模块。这点也可以有助于环形依赖的执行,这点我会后续解释。
内存相关 分段的内存管理方式有什么缺点为什么出现了分页的管理方式 分段的内存管理方式主要存在以下缺点: 外部碎片:当段的大小变化时,会在内存中产生一些难以利用的小空闲区域,这些区域被称为外部碎片。...加载器简化:操作系统的加载器(loader)在加载可执行文件时,会根据文件中的段信息来映射到内存中的相应位置。使用段可以减少加载器的复杂性。...符号表存储了程序中定义和引用的符号(如函数和变量)的信息,而重定位表则记录了符号引用需要修正的地址信息。 当程序加载到内存时,操作系统使用加载器来加载可执行文件,并查看重定位表。...**符号重定向通常用于实现动态库的加载和卸载、不同程序之间的接口转换等功能。 符号表的重定位是如何进行匹配的 在链接阶段,链接器会**将目标文件中的符号引用与实际符号进行匹配,以实现正确的链接。...****加载阶段 : 当程序加载到内存中时,操作系统使用加载器来加载可执行文件。 加载器查看重定位表,并将 main.o 中对 add 函数的引用修正为 add 函数在内存中的实际虚拟地址。
可以‘凭空’创造实例的属性 (10)正则 ! (11)关于模块 Python有导入模块和加载模块之分。模块可以被导入多次,但只会被加载一次。...P (16)Django的模板 模板是一种独立的文本文件,同时还包含了静态的内容和动态标记的逻辑,循环和数据显示等。...模板系统通常用来生成HTML文件,但还可以生成log文件,E-mail正文,CSV文件等任何文本格式。! 在模板中输出context变量时,会隐式的调用unicode方法。...当有关联对象时,Django会给表单添加一个额外的方法 save_m2m (21)区别于Model ModelForm的Meta嵌套类允许你定义两个可选属性,fields和exclude...当为POST时,绑定Form与request.POST。并验证是否有效。 当不为‘POST’时,只需将Form清空即可。然后处理本views要显示的东西。