【Nuxt.js】static内のファイルパス指定にご用心【覚書】

はじめに

コジマです。

恥を承知で書いてるんですけどね。
二度と忘れないために。

やろうとしてたこと

staticフォルダに入れたファイルをaタグ使ってダウンロードする機能を作ろうとしてて

<a href="/static/hoge.txt" download="hoge.txt">download</a>

みたいな書き方して、ページのHTMLがDLされるし、DLしようとしたファイルもそのHTMLに書き換わっちゃってるし
なんでやってなってしまった。

原因

ここら辺見ると分かります。
https://nuxtjs.org/guide/assets

https://github.com/nuxt/nuxt.js

上記を踏まえて

<a href="/hoge.txt" download="hoge.txt">download</a>

とすることで解決しました。

staticを明示的にパスに含めてで参照しているようなソースも見たことあるので
参照するだけならたぶん大丈夫？だと思うのですが、
ファイルDLのときだけあのような挙動になってしまうことについてはまだわかってないので
また時間作って調べてみるかな、、わかるかな、、

さいごに

公式ドキュメントの偉大さを分かっていながらもそれに打ちのめされた回でした、

staticあんま使わなかったから知識に偏りが出ちゃってましたね。猛省。

staticをファイルパスに含めた時にファイルDLするとそのファイルがHTMLファイルになってしまう現象わかる方いたら
こっそり教えてほしい

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！

以上、コジマでした。