結論 → 基本はassetsで！
基本的には assets を用い、 webpack を通さなくていいファイルや webpack で不都合が生じるファイルがあった場合に static の使用を検討すればいいようです。
また、データ容量の小さな画像は「assets」、データ容量の大きな画像は「static」に格納する。
assetsディレクトリ
assets の場合は下記２点が static と違う点であるとわかりました。
特徴1
assets/ に配置した画像は、 npm run generate コマンド実行時に、 ハッシュ付きの特別なファイル名に変更された上で、 dist/ に展開されます。この処理がコマンド実行の度に行われることで、同じファイル名で画像が変更された際のキャッシュ管理に役立ちます。
<!-- このように変換（base64の部分が実際のデータ） -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU ... 5ErkJggg==">
これにより、過去のキャッシュの影響を受けないことがメリットです。
つまり、ブラウザが過去に訪問したWebサイトに変更があり画像が変わっていたとしても、ファイル名が自動で変えられているため、過去のキャッシュではなく変更後の画像を表示してくれます。
特徴２
自動エンコードされ配信されるので高速化。
assetsから読み込んだ画像フォルダが1KB未満の小さな容量であったとき、 自動的にbase64エンコードされたデータがhtml上で展開されるため、 小さなアイコンファイル等を複数利用しているケースの画像配信が高速化されます。
HTML側からassets配下のファイルを参照
assers/ 配下にファイルがある場合、assets/img/my.jpg のパスで作成した画像ファイルの参照は、 以下のように記述します。
<template>
<div>
...
<img src="~assets/img/my.jpg" alt="">
...
</div>
</template>
CSS側からassets配下のファイルを参照
css ファイルの中で assets ディレクトリにリンクする必要がある場合は、下記のように記述します。
background: url('~assets/img/my.jpg');
staticディレクトリ
static/ 配下のファイルは、 webpack でコンパイルされません。
これらの画像は npm run generate コマンドで、そのまま dist/ に展開されます。
つまり、直接サーバーのルート配下に配置されます。
static配下のファイルを参照
static 直下に favicon を配置した場合、 static/favicon.ico のパスで作成した画像ファイルの参照は、 以下のように static/ を省いて記述します。
<template>
<div>
...
<img src="/favicon.ico" alt="">
...
</div>
</template>
static配下に置くべきなのは？
- 加工した画像などの容量の大きいもの
- favicon.icoなど外部から読み込む可能性のあるもの
- 名前を変更されたくないファイル （assetsの場合、webpackにより名前を変えられてしまうので）
- 基本は CSS/JS は assets だけど、外部ライブラリの CSS/JS など、自分で編集しないファイルは static が良い？