Public files of Vue static resources

foreword

When looking at the company’s project code today, I found a rather interesting animation. After reviewing the elements, I found out that it was a gif animation. After checking the relevant code, I found that the path of the picture was written. So I searched for the third level according to the previous habit. After searching for a long time, I found nothing ../../../xxx/xxx.gif. Find that file, and finally a global search found that the file exists publicin the folder of the root directory.

root search

This made me very confused. I began to guess whether there was a special configuration in that configuration file. I still couldn’t find the relevant configuration after a quick operation, and then I began to wonder if I was not familiar with the project and couldn’t find it. So I created a new Vue3 project, wrote the following code:

<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>

Then an interesting thing happened, the above 6 methods can actually display pictures, which touches the blind spot of my knowledge, why are they all displayed?

Inspect the element and find that all image addresses start from the root directory

insert image description here

find information

I guessed that it was a problem of vue packaging, so I opened the vue-cli official website and found publicthe relevant introduction of the folder:
insert image description here

My personal understanding is that publicthe content under the existing folder will be considered as static resources, will not be packaged by webpack, and will be copied directly to the root directory of the deployment environment, and access can only be accessed through relative paths, so all uses are ../ ../../ ../../../ ./ /access The root directory of the root directory, there is no superior file in the root directory, and it is the same to write whatever you want.

at last

Today I learned a little bit of new knowledge and gained something. If it is helpful to you, please give me a thumbs up.