はじめに
この記事ではNuxt.jsの「assets」ディレクトリと「static」ディレクトリの使い分けと、ディレクトリに配置したファイルの参照方法について紹介します。
assetsとstaticディレクトリの使い分け
Nuxtでは画像ファイル等を「assets」、または「static」ディレクトリに配置します。
この2つのディレクトリの使い分けは、webpackでコンパイルしたいかどうかで判断します。
- assets ディレクトリ
ディレクトリ構造デフォルトの Nuxt のアプリケーション構造は小規模なものから大規模なものまで両方のアプリケーションにとって素晴らしい出発点を提供することを目的としています。アプリケーションは自由に構成でき、必要に応じて他のディレクトリを作成することができます。ja.nuxtjs.org - Static
アセットディレクトリThe assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.ja.nuxtjs.org
webpackでコンパイルしたい場合は「assets」ディレクトリに、コンパイルしたくない場合は「static」ディレクトリにファイルを入れます。
それぞれのファイルの使用方法
「assets」と「static」のファイルを使用するときですが、パスの指定方法が変わってきます。
下記ではそれぞれのディレクトリに用意した画像ファイルを、<template>タグ内で使用するときの書き方を例に示します。
assetsディレクトリのファイルを参照する
assets配下のファイルを使用する場合は「~/assets」を指定します。
<template>
<img src="~/assets/image/icon.png" width="16" height="16" />
</template>※ ドキュメントにあるように、CSSで参照する際はエイリアスに注意してください。
アセットディレクトリ
The assets directory contains your un-compiled assets such as Stylus or Sass files, images, or fonts.
ja.nuxtjs.org
Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし）か、@ のエイリアスを使わなければなりません。 例：background: url(“~assets/banner.svg”)
staticディレクトリのファイルを参照する
static配下のファイルを使用する場合はディレクトリ配下のパスのみを指定します。
<template>
<img src="/image/icon.png" width="16" height="16" />
</template>
