为什么 public 目录的内容要以根目录展示?

前言:

在 Vue.js 项目中,特别是使用 Vue CLI 创建的项目,默认情况下,静态资源(如图片、字体等)应该放在 public 目录下,并且可以通过根路径直接访问。这是因为 public 目录下的文件在构建过程中会被直接复制到输出目录的根目录下,而不会经过 Webpack 的处理。

原因:

  1. 直接访问

    • 文件放在 public 目录下后,可以通过根路径直接访问。例如,public/cat.jpg 可以通过 /cat.jpg 访问。因为开发服务器会将 public 文件夹中的所有文件作为静态资源进行服务,http://localhost:5174/cat1.jpg查看展示静态资源
    • 这与 src/assets 目录不同,src/assets 目录下的文件会被 Webpack 处理,并且路径会根据构建配置进行变化。
  2. 静态资源

    • public 目录通常用于存放不需要经过 Webpack 处理的静态资源,如 favicon.icorobots.txt 等。
    • 这些文件在开发和生产环境中都需要保持一致的路径。
  3. 路径问题

    • 如果你在 CSS 中使用相对路径引用 public 目录下的文件,可能会导致路径错误,特别是在不同的构建环境下。

    • 绝对路径(以 / 开头):从服务器根目录开始查找文件(public 目录的资源 )。

      相对路径:相对于当前 CSS 文件的位置查找文件(src目录下的资源)。

相关推荐
江拥羡橙26 分钟前
css实现拼图样式,响应不同屏幕宽度
vue·less·css3·html5·1024程序员节·calc
小九今天不码代码3 小时前
巧用 CSS linear-gradient 实现多种下划线文字特效(纯 CSS 无需额外标签)
css·css3·前端开发·linear-gradient·前端特效·下划线样式·文字特效
W.Y.B.G1 天前
css3 学习笔记
笔记·学习·css3·1024程序员节
代码改变世界100862 天前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节
冰暮流星2 天前
css3新增背景图片样式
前端·css·css3
.生产的驴3 天前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
小九今天不码代码3 天前
【前端高级特效】使用 CSS 实现毛玻璃模糊背景效果(含完整源码讲解)
css3·毛玻璃效果·css滤镜·backdrop-filter·blur模糊·前端特效·css视觉效果
代码改变世界100864 天前
像素策略游戏:资源战争
css·游戏·css3
林恒smileZAZ4 天前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
luckyPian4 天前
前端+AI:CSS3(二)
前端·css·css3