laradockにvue-cliをいれて動かしてみた
こんにちは!株式会社スマレジ、開発部のmasaです。
通勤中、あちらこちらでクリスマスソングが流れてきて、時間の流れるのを早く感じます。。。そうか、もうすぐ入社1年なんだな。
さて、今日は前回の続きで、laradockにVueを入れた時の備忘録です。
Vue-cliとバックエンド
masaは基本、仕事はバックエンド中心で、フロントはスマレジの古いページにjQueryを入れたりするくらいだったのですが、最近Vueを触るお仕事があり、それ以来個人的な範囲でVue.jsを触ってみています。
それで、前回Laravelを入れたので、その環境でVueを触ろうとしたのですが。。。
Laravelはフロントエンドも開発しやすい仕組み(Laravel-mix)が入っているのですが、それはVue-cliとは別になっているものです。しかし、Laravel-mixベースで開発してしまうと複数のプロダクトで複数のフレームワークを利用してサービスを提供している環境だと、フロントエンドの成果物を使いまわす際に他のフレームワークへの移植時の作業が増えてしまいます。
「せっかくVue-cliという共通で使えるツールがあるのだから、バックエンドフレームワーク側でVue-cliを導入できるようにしたい」という発想から、今回はLaradockにVue-cliを入れることに。
ちなみにVue-cliの導入に参考にしたサイト様
というわけで、Vue-cliを覗いたのですが...
Vueのソース自体はわかるのですが、
1. buildファイルの生成場所の指定
2. LaravelのViewファイルとの紐づけ
この辺りがわかんねえええ!となり、ググってみることに。
お世話になったサイト様
↑の疑問がこの記事でまるっと解決しました。
ポイントは紐づけ用のコントローラ(記事でいうところのSpaController)とvue側の設定ファイル(vue.config.js)を追加してやらなければならないという点です。
使用している開発環境が違いますが、Laradockでも問題なく動作しました。