はじめに
Vueでよく使うエイリアスに@と~がある。
違いや使い分けがあるのか調べたのでメモしておく。
このエイリアスはフレームワークが提供しているものではなく、webpackで設定しているものです。
そのため以下は、デフォルトのVueやNuxtにおけるデフォルトのwebpackの設定についてです。
@と~で違いはない
結論として@と~で違いはない。
ただし注意点はある。
| エイリアス | ディレクトリ |
|---|---|
~ or @
|
srcDir |
~~ or @@
|
rootDir |
Vue CLIのデフォルトは srcDir と rootDir が異なる。
Nuxtのデフォルトでは srcDir と rootDir は同じ。
注意点
Vueテンプレート内で assets または static ディレクトリへのリンクを使う時は~/assets/image.png と使う。