Vue CLIのPJでHTMLやJSファイルなどをブラウザからアクセスさせたいとき

2020年6月16日2020年6月22日

今回はVue CLIのプロジェクトでHTMLやJSファイルなどをブラウザからアクセスできるようにするためにはどうすれば良いのかについてご紹介いたします。

Vue CLIのPJでHTMLやJSファイルなどをブラウザからアクセスさせたいとき

Vue CLIを使用しているときに、HTMLやJSファイルなどをブラウザからアクセスしようとしてプチハマりしたのでまとめていこうと思います。

私の今回のケースではVueはVue routerを使用していますが、最初私はなんとかimportでHTMLなどのファイルをimportしてrouterでルーティングすることを考えていました。

挙げ句の果てにはhtml-loaderまでinstallしましたが、結論としてはそのようなことをする必要はまったくありませんでした。
どうやらVueプロジェクトのpublicフォルダにHTMLやJSファイルなどの静的ファイルを格納すれば良いだけです。

publicフォルダの直下に「test.html」や「test.js」を作成し、ブラウザから「http://localhost:8080/test.html」のようにアクセスすると意図したファイルにアクセスできるようになりました。
どうやらpublicフォルダ以下のファイルはwebpackの対象外となるようです。