less中相对路径资源404的根源是编译时按less文件位置解析，而运行时浏览器按css位置请求；应统一用public目录或配publicpath+less-loader paths确保路径对齐。
Less里用相对路径引入图片或字体，构建后404
构建工具（如Webpack/Vite）把Less编译成CSS时，@import、url()里的路径是按Less文件所在位置解析的，不是按最终CSS输出位置。比如src/styles/base.less里写url(../assets/logo.png)，构建后CSS被输出到dist/css/main.css，但浏览器仍会从dist/css/下找../assets/logo.png——这显然不存在。
- 最直接的办法是统一用
public目录：把资源放public/assets/logo.png，Less里写url(/assets/logo.png)（注意开头斜杠） - 若必须用
src/assets，需配publicPath：Webpack中设output.publicPath = '/'，Vite中设base = '/'，确保所有资源URL前缀一致 - 避免在Less里写
../../这种深度相对路径，它极易因文件移动或构建层级变化而断裂
Webpack中publicPath对Less内url()的实际影响
publicPath只控制运行时资源加载路径前缀，不影响Less编译阶段的路径解析。也就是说，publicPath: '/static/'会让url(logo.png)最终生成url(/static/logo.png)，但前提是Less-loader配置了paths或构建工具启用了resolve.alias来辅助定位。
- 必须配合
less-loader的paths选项，例如：paths: [path.resolve(__dirname, 'src/assets')]，否则url('./logo.png')仍按Less文件同级查找 - 如果用了CSS Modules（
.module.less），url()里的路径行为不变，但类名哈希化可能掩盖路径问题，建议先关掉Modules验证路径 -
publicPath设为相对值（如''或'./'）在子目录部署时容易出错，生产环境强烈建议用绝对路径（'/'或完整域名）
Vite环境下Less路径失效的特殊原因
Vite默认不处理url()中的相对路径重写，它把Less交给less原生编译器，而原生Less不会自动适配构建输出结构。所以即使你配了base: '/app/'，url(../img/icon.svg)依然按源文件位置解析，不会自动转成/app/img/icon.svg。
- 解决方案一：改用
new URL('./icon.svg', import.meta.url).href动态获取路径，再传给CSS变量（适合少量资源） - 解决方案二：在
vite.config.ts中加css.preprocessorOptions.less.paths，指向资源根目录 - 别依赖
~别名处理url()路径——~只对@import有效，对url()无效
为什么修改less-loader的javascriptEnabled能“修复”路径
这个选项和路径无关，它只是启用Less里的JS表达式（如unit(@width, px)）。但很多人误以为开了它就能让url()支持变量拼接，其实不能：@url: './img/'; url(@url + 'logo.png');在任何版本Less里都不合法。
- 真正起作用的是
less-loader的paths或alias配置，不是javascriptEnabled - 如果你发现开了
javascriptEnabled后路径“好了”，大概率是同时改了其他配置，或者缓存没清导致误判 - Ant Design等库的
modifyVars里写的@icon-url之类变量，最终也是靠paths或publicPath落地，不是靠JS执行
@import）、运行时（浏览器加载url()）、部署时（服务端路由是否匹配publicPath）。三个环节只要一个没对齐，就会404。最容易被忽略的是：开发服务器（如Vite Dev Server）自动重写publicPath，但生产Nginx配置没同步，结果本地正常、上线就挂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
