PHP・Vue.js（VueCLI）における環境構築方法

Question

前提・実現したいこと

以下を使用した環境構築について、アドバイスをお願いしたいです。

種類	名前
Webサーバー	Apache
サーバーサイド言語	PHP
PHPフレームワーク	Slim
フロントエンド	Vue.js（VueCLI）

相談内容

Vue.jsで、vueファイルを使用する際は、一般的に、VueCLIで環境を構築するものだと認識しております（もちろん一から環境を構築出来るということも存じています）。

ただ、どのような紹介記事においても、VueCLIの導入に際して、サーバーサイド言語と組み合わせて使用するようなパターンについての言及を、見たことがありません。

今回、PHPをサーバーサイド言語として利用した場合に、どのようにVueCLIと組み合わせて利用するのかを具体的に知りたいと思い、相談させていただきました。

例えば、PHP・Slimフレームワークの組み合わせでのディレクトリ構成を考えた場合、以下のようになるかと考えております。

※以下の、Projectというのは、NetBeansやEclipseにおけるルートの単位（1ビルド単位）です。

Project
 |
 + src （PHPソース）
 + public （公開ディレクトリ）
    + index.php
    + assets
      |
      + js
      + css
      + img

確認したいこと

• 上記ディレクトリに、VueCLIを組み合わせて使う際は、どのようなディレクトリ構成がベターなのでしょうか？

• そもそも、Projectはクライアント（Vue.js）とサーバーサイド（PHP）で別個になったりしますか？

• よくあるサンプルでは、node.jsのWebサーバーを起動して、8080にアクセスして、そちらでページを表示する流れになっていますが、開発時の動作確認にはApache＋PHPを使いたいのです。そのような場合、ホットリロード（vmファイルを編集したらすぐに反映確認できる）を組み合わせてスピーディーに動作確認するようなことはできたりするのでしょうか？

---

フロントエンドは、今までに Knockout.js や AngularJS、Vue.JS（vueファイルの使用がない）、を経験しておりますが、Vue.jsの、vueファイルをビルドする領域に突入してから、途端に高難易度になってしまったように感じます。

回答者様のご意見の他に、もし、サーバーサイドとVueCLIの組み合わせについて言及している書籍やサイトなどの情報もご存知であれば、教えていただきたいです。

よろしくお願いいたします。

Answer 1

VueJSを使用する例においてはおっしゃるようにSPAの例が多くありnodeでHTMLをサーブする例が一般的ですが、もちろんnodeを使用しなくてもHTMLをサーブすればVueを使用することができます。

私は現在の業務でJavaをサーバーサイドにして、Java側で出力したHTMLでVueを使用しています。

Vueのシングルファイルコンポーネント(.vue)はそのままHTMLから呼ぶことはできないのでそれをコンパイル(webpackやbrowserify)を使用して(.js)ファイルにする必要があります。あとは出力された.jsをhtmlの中で普通に <script src="/dist/app.js"></script>のようにして呼んであげればよいです。

下記のようなプロジェクト構成になるのではないかと思います。(トランスパイラはwebpackを想定してます)

Project
 |
 + src （PHPソース）
 + vue  (vueJSソース VueCLIで作成されたフォルダ)
 +  + main.js
 |  + app.vue
 |  + webpack.config.js 
 |  + package.json
 |  + node_modules
 + public （公開ディレクトリ）
    + index.php
    + assets
      |
      + js
      + css
      + img
      + dist (Vueソースのコンパイルしたものの出力先 webpack.config.jsで指定)
             出力先を assets/jsにしてもいいけど区別するために分けてます

出力するフォルダについてはwebpack.config.js の中に指定があるのでそこで変更すればよいです。

• webpackの設定ファイル「webpack.config.js」の使い方を覚えよう - 出力先フォルダやファイル名の変更

HotReloadについてはSlimの中でそのような機能があればできるのではないかと思います、おそらく監視するフォルダを指定するのではないかと...
あいにくSlimについては経験がないので詳しいことはわかりません。
ちなみに私はJavaのSpringBootというフレームワークを使用しておりHotReloadの機能があるので
Vueソースのコンパイル結果のフォルダを監視対象にしていることでホットリロードできています。

Comments

[Ison]

スピーディーなご回答ありがとうございます。
非常に納得のいく内容でした。早速、試してみようかと思います。

ありがとうございました。