url()在Less中报404是因为构建后CSS路径变化导致相对路径解析错误；应使用~前缀触发模块解析、public/目录配绝对路径或变量插值时严格配合~""格式。
Less 里 url() 引用图片报 404，不是路径写错了，是浏览器按最终 CSS 文件位置去解析相对路径，而 Less 编译器只是原样输出字符串，不做任何路径修正。
为什么 url("../img/logo.png") 开发正常、构建后全 404
开发时 CSS 可能内联或未抽离，路径基准模糊；构建后 CSS 被输出到 dist/css/app.css，图片在 dist/assets/img/，但 url("../img/logo.png") 会请求 dist/css/../img/logo.png → dist/img/logo.png，和实际位置错开一级。
- 打开浏览器 Network 面板，看报错的
Request URL，它才是真实解析起点 - 打开
dist目录，肉眼数清 CSS 文件到图片之间的目录层级（向上几级、再进几个文件夹） - 别在源码里硬写
../—— 构建工具可能改变 CSS 输出层级，导致相对路径失效
用 ~ 前缀让 Webpack/Vite 正确解析 url()
~ 是模块解析开关，告诉构建工具“这个路径要走 resolve.alias 或文件系统查找”，但必须写对格式。
-
background: url(~"@assets/img/logo.png");✅ ——~紧贴引号内，且变量插值用@{...}写在引号里 -
background: url(~@assets/img/logo.png);❌ —— 缺少引号，less-loader无法识别 -
background: url('~@assets/img/logo.png');❌ ——~在引号外，不触发模块解析 - 确保
webpack.config.js或vite.config.ts中已配好resolve.alias，例如：@assets: path.resolve(__dirname, "src/assets")
用 public/ 目录 + 根绝对路径最稳
适合 favicon、logo、banner 这类不需哈希、不常变动的资源。构建工具完全不处理 public/ 下内容，路径绝对可控。
- 把图片放进
public/assets/logo.png - CSS 中直接写：
background: url("/assets/logo.png");（开头必须有/） - Vite 用户注意
vite.config.ts的base配置：部署在子路径如/my-app/，就得设base: "/my-app/"，否则请求地址会变成/assets/logo.png而非/my-app/assets/logo.png - Vue CLI 用户确认
process.env.PUBLIC_URL已注入，并统一用url("/assets/logo.png")
url() 里用变量拼接必须加 ~""，且变量值不能含别名
Less 变量本身不参与构建路径解析，@{img-base} 插值只是文本替换，不会触发 Webpack alias 或 Vite 别名映射。
- 定义变量时末尾带
/：@img-base: "/assets/img/"; - 使用时必须用
~""包裹：background: url(~"@{img-base}icon.svg"); - 别写成
url("@{img-base}icon.svg")—— 浏览器收到的是字面量字符串，不会展开变量 - 别把
@/assets这种别名直接塞进变量：@img-base: "@/assets/img/";❌，Less 不认这个 alias
最容易被忽略的是：变量插值和 ~ 必须同时存在，缺一不可；~"" 内部不支持嵌套插值，比如 ~"@{base}/@{name}.png" 中的 @{name} 不会被替换，只会原样输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
