Vue 静的リソースの公開ファイル

序文

今日、会社のプロジェクトコードを見ていたら、もっと面白いアニメーションを見つけたので、要素を確認したらgifアニメだったので、関連コードを確認したら、絵のパスが書かれていたので、以前の習慣に従って、第 3 レベルを検索しました.長い間検索した後、何も見つかりませんでした.../../../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 の公式 Web サイトを開いて、public関連するフォルダーの紹介を見つけました。
ここに画像の説明を挿入

私の個人的な理解では、public既存のフォルダーの下のコンテンツは静的リソースと見なされ、webpack によってパッケージ化されず、展開環境のルートディレクトリに直接コピーされ、アクセスは相対パスを介してのみアクセスできるため、すべての用途は../ ../../ ../../../ ./ /アクセスですルートディレクトリのルートディレクトリ、ルートディレクトリには上位ファイルはなく、好きなように書き込むのは同じです。

やっと

今日は少し新しい知識を学び、何かを得ました。役に立ったら、高評価をお願いします。