Vue模板中src="@/assets/xxx"直接写字符串会404，因@别名仅在JS/TS中被构建工具解析；正确方式是：Webpack用require("@/assets/xxx")，Vite用new URL("../assets/xxx", import.meta.url).href，并需正确配置publicPath与资源处理规则。
WebStorm 本身不解决 Vue 打包后图片路径报错，它只负责代码提示和跳转；真正起作用的是构建工具（Webpack/Vite）的配置 + 你写的引用方式。报错根源几乎都出在路径解析逻辑被绕过或 publicPath 配置失配。
Vue 模板里 src="@/assets/logo.png" 为什么打包后 404
这是最典型的误用：@ 别名只在 JS/TS 的 import 或 require() 中由 Webpack/Vite 解析，模板中写死的字符串路径完全不经过构建流程处理。浏览器直接发起 GET /@/assets/logo.png 请求，当然 404。
- 错误写法：
- 静态正确写法：
import logoUrl from '@/assets/logo.png' - 动态正确写法（Webpack）：
- 动态正确写法（Vite）：
const getIcon = (name) => new URL(`../assets/icons/${name}.png`, import.meta.url).href——require()在 Vite 中会直接报ReferenceError
publicPath 配置错一个点，所有图片 JS CSS 全挂
Vue CLI 默认 publicPath: '/'，意味着所有资源路径从域名根开始拼。但如果你把打包产物部署在子路径下（比如 https://example.com/my-app/），/static/js/app.js 就会去请求根目录，而不是 /my-app/static/js/app.js。
-
vue.config.js 中必须显式设为相对路径：
publicPath: './'（开发和生产一致时）或根据环境动态设置：publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/' - Webpack 项目还需检查
build/utils.js中 CSS 处理器的publicPath，例如ExtractTextPlugin.extract({ publicPath: '../../' })—— 这个值要匹配 CSS 文件与最终图片文件的相对层级 - Vite 项目无需改
publicPath，但必须确保vite.config.ts中的base与部署路径一致，比如部署到子目录就设base: '/my-app/'
图片进了 public/ 目录还是 404？检查三件事
public/ 下的文件是原样复制进 dist/ 的，不走构建流程，所以路径必须是绝对路径，且受部署环境约束。
- 引用必须用绝对路径：
./logo.png或logo.png） - 本地双击打开
dist/index.html必然 404 —— 因为file://协议下/指向磁盘根目录，不是dist目录；必须用本地服务启动，如npx serve -s dist - 部署到 Nginx/Apache 时，确认服务器配置了正确的 root 或 alias，且没有重写规则意外截断
/logo.png请求
最容易被忽略的是：Webpack 的 url-loader 或 Vite 的资源处理对文件大小有默认阈值（如 4KB），小图会被转成 base64 内联，大图才生成独立文件。如果只改了引用方式却没同步调整 loader 限制，部分图片仍可能因未被识别而漏掉 hash 处理，导致路径失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
