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

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の対象外となるようです。

終わりに

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

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Vue CLI

Posted by ちこ