vue静态资源路径配置核心在于匹配资源位置与引用方式：public目录文件不经过构建处理、可绝对路径访问，适合favicon和第三方脚本；src/assets目录文件被webpack/vite编译压缩并哈希重命名，须用require/import/new url引入，适合业务图片、字体等。
Vue 静态资源路径配置的核心，是搞清 资源存放位置 和 引用方式 的匹配关系。配错一个环节，打包后就容易出现 404、图片不显示、样式丢失等问题。
区分 public 和 src/assets 两个目录
这是最基础也最容易混淆的一点：
-
public 目录下的文件：不经过 Webpack/Vite 处理，原样复制到 dist 根目录，可通过绝对路径直接访问，比如
/logo.png或/js/third-party.js；适合 favicon.ico、第三方脚本、需动态拼接路径的图片等。 -
src/assets 目录下的文件：被构建工具识别为模块，参与编译、压缩、哈希重命名（如
logo.a1b2c3.png），必须用require()（Vue 2）、import（Vue 3 + Vite）或new URL(..., import.meta.url).href（Vite 动态路径）来引入；适合组件内图标、背景图、字体等业务相关资源。
正确设置 publicPath 避免部署路径错乱
publicPath 决定了所有打包后资源的“根前缀”，它不是开发时的路径，而是最终上线时浏览器请求资源的起点：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 部署在根域名（如
https://example.com/）：设为'/'（默认值）即可。 - 部署在子路径（如
https://example.com/my-app/）：必须设为'/my-app/'，且 SpringBoot 等后端也要将静态资源映射到该路径下，否则 JS/CSS 请求会跑到根目录去。 - 本地测试或离线运行（如双击打开 index.html）：可设为
'./'，让资源路径相对 HTML 文件解析，避免跨域或 404。
Vue 2 与 Vue 3（Vite）的引用写法差异
同一张图片，在不同项目中写法可能完全不同：
- Vue 2（Webpack）模板中：
<img :src="require('@/assets/logo.png')"> - Vue 3（Vite）模板中：
<img :src="logo">，配合const logo = new URL('./assets/logo.png', import.meta.url).href - 动态路径（如根据变量加载图片）：Vite 必须用
new URL(`./assets/${name}.png`, import.meta.url).href，不能写@/assets/${name}.png，因为@是构建别名，浏览器不认识。
常见坑点与验证方法
配置完别急着上线，先做这几件事：
- 运行
npm run build，打开 dist/index.html，检查浏览器开发者工具的 Network 面板，看图片、JS、CSS 请求是否返回 200，路径是否符合预期。 - 确认 HTML 中 script 和 link 标签的
src/href是否带了正确的前缀（如/my-app/js/app.abc.js）。 - 如果用 Nginx 或 SpringBoot 托管，检查服务器是否把
/my-app/下的静态请求正确指向 dist 对应目录，而不是只配了/。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
