問題の状況

実習の際は投資説明のためにVUEを素早く作成しPRするので、ViteでVUEアプリケーションを構築します.
既存のVueCLIではなくViteを初めて使用することにした.プレゼンテーションページを作成してページのボリュームも小さいので、積極的に新技術を取り入れたいと思います.
Viteについては後述します
Viteは確かに既存のWebパッケージよりずっと速いです.開発経験が大きく向上したと感じられます.
しかし、画像のダイナミックロードが予想通りに実現されていないという問題が発生した.
開発環境では正常に動作していますが、構築後の導入環境でエラーが発生しました.

	<div v-for="image in images" :key="image.id">
		<img :src="`@/image_path/${image.src}`">
   </div>

以前にVueCLIを使用して作成した項目では、上記のパスを使用して画像をロードすることもできます.しかしViteは404 Not Foundが発生したことを発見した.

解決策

試してみる。require

srcセクションでは、require(../image_path/${image.src})のようにrequireを利用しようとしたが、「require」モジュールにエラーは見つからなかった.
検索するとrequireはWebパッケージでサポートされているモジュールであることがわかりました.

試すimport.meta

https://vitejs-kr.github.io/guide/assets.html#new-url-url-import-meta-url
対応する公式ファイルを参照して、リソースをインポートしてみます.

<script>
export default{
 setup(){
   
   function getImageUrl(path){
   	return new URL(path).href;  
   }
   return{
     getImageUrl
   }
 },
}
</script>

<template>
	<div v-for="image in images" :key="image.id">  
    	<img :src="getImageUrl(image.src)" />  
  	</div>
</template>

本書で提案された解決策は、ネイティブESMのAPIの1つであるimport.meta.urlを使用して、現在のモジュールのURLを取得することである.URL作成者と一緒に使用すると、静的リソースのURLを表示できます.
でも失敗しました.

失敗の原因

失敗の原因はプロジェクトフォルダ構造です.
既存のフォルダ構造

	- puiblic
    	- favicon.ico
    - src
    	- assets
    	- components
        - composables
        - router
        	- ...
        - views
        	- ...
        - styles
        	- ...
        - store
        	- ...
        - App.vue
        - main.js
    - index.html
    - package.json
    - vite.config.js
   

既存の構造から、資産がsrcフォルダで管理されるように作成されていることがわかります.既存のプロジェクトでは問題は発生していませんが、Viteではこの構造は使用できません.
構築時にdistフォルダにjs、css、htmlファイルが生成され、srcフォルダのassetsは正しいパスにアクセスできません.
Viteはassetsフォルダをパブリックフォルダに入れることを教えてくれています.
次のリソースについて、共通フォルダに配置します.
1. robots.ソースコードで参照されていないリソース(txtなど)
2.ハッシュなしで常に同じ名前のリソース
3.またはインポートなしでURLを入手できるリソース
publicフォルダに配置されたassetsは、開発時に/パス、導入時にdistディレクトリにあります.
共通ディレクトリにあるリソースをインポートする場合は、ルートディレクトリの絶対パスに常にインポートする必要があります.(共通/icon.pngリソースは、ソースコードから/icon.pngにアクセスできます.)
共通ディレクトリにあるリソースをJavaScriptコードにインポートできません.
明らかに、私は公式ドキュメントに従いながら環境設定を行い、コードを作成しました.資産をパブリックフォルダに置くべきだということを目撃しましたが、簡単にフォルダ構造を作成できたと思います.その結果、構築時にViteが生成した結果が一致せず、エラーが発生しました.
その後に変更されたフォルダ構造は以下のようになります.

	- puiblic
    	- favicon.ico
        - assets
        	- images
            	- ...
    - src	
    	- components
        - composables
        - router
        - views
        - styles
        - store
        - App.vue
        - main.js
    - index.html
    - package.json
    - vite.config.js

以降のコードでは、publicフォルダのassetsフォルダに절대경로を使用してアクセスします.

	 <img
         :src="`/assets/images/${imageName}.jpg`"
         alt="product"
     />

きょうの教訓
公式文書をよく読みましょう.