Vue静态资源之public文件

前言

今天在看公司项目代码时，发现了一个比较有趣的动画，审查元素才发现是一个gif动图，查看相关代码发现图片路径写的是../../../xxx/xxx.gif于是我按照之前的习惯向上找三级，找了半天没有找到那个文件，最后全局搜索发现文件是存在根目录的public文件夹下。

寻根

这就让我很疑惑，我开始猜测是不是在那个配置文件里面有特殊的配置，一顿操作还是没有找到相关配置，然后又开始怀疑是不是我项目不熟悉没找到，于是我新建了一个Vue3项目，写下了如下代码:

<template>
  <div>测试图片页面</div>
  <img :src="bgImg1" alt="测试图片">
  <img :src="bgImg2" alt="测试图片">
  <img :src="bgImg3" alt="测试图片">
  <img :src="bgImg4" alt="测试图片">
  <img :src="bgImg5" alt="测试图片">
  <img :src="bgImg6" alt="测试图片">
</template>
<script setup lang="ts">
const bgImg1 = '../static/runningbg.gif'
const bgImg2 = '../../static/runningbg.gif'
const bgImg3 = '../../../static/runningbg.gif'
const bgImg4 = '/static/runningbg.gif'
const bgImg5 = './static/runningbg.gif'
const bgImg6 = 'static/runningbg.gif'
</script>

然后有趣的事情发生了，这上面的6种方式居然都能显示出图片，这就触及到我知识的盲区了，为什么都会显示出来呢

审查元素发现所有的图片地址都是从根目录下面开始的

查找资料

我又猜测是vue打包的问题，于是我打开了vue-cli官网,找到了public文件夹的相关介绍：

我个人理解的就是，存在public文件夹下面的内容都会被认为是静态资源，不会经过webpack打包，会直接复制到部署环境的根目录下，访问也只能通过相对路径访问，所以使用../ ../../ ../../../ ./ /都是访问的根目录，根目录没有上级文件了，随便写啥都一样。

最后

今天算是又学到了一点新的知识点，有所收获，如果对你有点帮助的话就点个赞吧