LoginSignup
3
2

More than 1 year has passed since last update.

[小ネタ] Vueの静的ファイル配置

Last updated at Posted at 2022-05-26

この記事に関して

先に「jestを使ってVue3のUnitテストをやってみようとして苦労した話」という記事を書きました。その中で、wasmモジュールの扱いが残課題として残っている状態でした。それに関して調べているうちに、さらに前に書いた記事「VueからWebAssembly(seed使用)を利用してみる。」がちょっと無駄な事してた事に気づきました。nginxを使って頑張っていたのですが、そんな大掛かりな事しなくて良かったのです。

それに関しての補正記事です。この記事書いた後、この記事を上記記事に引用追記します。

参考にさせてもらった記事

src/assetに置く場合とsrc/staticに置く場合の扱いの違いを詳しく説明してくれています。
簡単に言うと、ビルドした時に画像ファイルを変換して埋め込む処理をする動作と、ファイルをそのまま成果物フォルダ(distなど)にコピーする動作という違いです。

そうです、wasmモジュールファイルも、成果物フォルダにコピーする元フォルダにおけばよかったのです。

publicフォルダに配置

前述記事の時とはフォルダ構成が変わった様です。自分のプロジェクトではsrc/staticフォルダは存在しませんでした。しかし、成果物フォルダにそのままファイルコピーされているfavicon.icoがどこにあるか探すと、publicフォルダにありました。
そこで、wasmファイルとpublicフォルダに置いた所、ビルド成果物では該当フォルダにコピーされました。そして開発モードでも普通に読み込めました。

課題

残念ながら、本題である所のUnitテストでwasmモジュール読み込む所の問題はまだ解消出来てないです。引き続き調査します。

※後に解消しました。拙記事「jestでAPIなど他リソースが必要な機能のテストをしてみる

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2