株式会社スマレジの開発部でスマレジのサーバサイドを作っています

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の導入に参考にしたサイト様

qiita.com

というわけで、Vue-cliを覗いたのですが...

Vueのソース自体はわかるのですが、

1. buildファイルの生成場所の指定

2. LaravelのViewファイルとの紐づけ

この辺りがわかんねえええ!となり、ググってみることに。

お世話になったサイト様

tech.cydas.com

↑の疑問がこの記事でまるっと解決しました。

ポイントは紐づけ用のコントローラ(記事でいうところのSpaController)とvue側の設定ファイル(vue.config.js)を追加してやらなければならないという点です。

使用している開発環境が違いますが、Laradockでも問題なく動作しました。