Laravel + Vue CLI 3でバックエンドカスタマイズ可能なSPAを作る

「Vue CLI 3でrouterを使ったSPAを作りつつ、バックエンド側はLaravelで自在に作りたい！」という願望を前から持っており、実際にやってみたのでメモを残します。

こちらのnoteはVue.jsの開発者であるEvan YouさんのGItHubを参考にしています。

yyx990803/laravel-vue-cli-3

実行環境
macOS Mojave 10.14.6
PHP 7.1.23
Composer 1.8.3
Node.js 10.12.0
nom 6.4.1

それでは内容に入っていきます。

Laravel プロジェクトの作成

はじめにLaravelプロジェクトを作成します。例のごとくプロジェクト作成をしましょう。

$ composer create-project --prefer-dist laravel/laravel <プロジェクト名>
$ cd <プロジェクト名>

Vue デフォルトスカフォールドの削除

$ rm -rf package.json webpack.mix.js yarn.lock resources/assets

Vue CLI 3 プロジェクトの作成

ここではfrontendというVueプロジェクトを作成します。

$ vue create frontend

Vueプロジェクト作成時Vue routerを選択することを忘れないでください（出ないとシングルページアプリケーションでなくなってしまいます）。お好みでESLintやCSS Pre-Processorsなどを選んでください。

Vue 設定ファイルの作成

$ cd frontend
$ touch vue.config.js

vue.config.jsの中身は以下のように編集してください。

module.exports = {
 // proxy API requests to Valet during development
 devServer: {
   // 開発中のAPIを受け取るサーバー
   proxy: 'http://laracon.test'
 },

 // output built static files to Laravel's public dir.
 // note the "build" script in package.json needs to be modified as well.
 outputDir: '../public',

 // modify the location of the generated HTML file.
 // make sure to do this only in production.
 indexPath: process.env.NODE_ENV === 'production'
   ? '../resources/views/index.blade.php'
   : 'index.html'
}

Vue package.jsonの編集

package.jsonを手で編集しましょう。

"scripts": {
- "build": "vue-cli-service build",
+ "build": "rm -rf ../public/{js,css,img} && vue-cli-service build --no-clean",
},

Laravel SpaControllerの作成・編集

LaravelのSpaコントローラーを作成します。プロジェクトのルートディレクトリで、

$ php artisan make:controller SpaController

次に作成したSpaコントローラーを編集します。（app/Http/Controllers/SpaController.php）

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
   public function index()
   {
       return view('index');
   }
}

Laravel ルーターの編集

Laravel側のルーターを編集しましょう。（routes/web.php）

<?php

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

これでGETリクエストの全てをSpaControllerのindex関数に流すことができます。

開発の手順

今回作成しているのは、Laravelプロジェクト内のVueを使ったSPAです。開発を進めるときはLaravelで、

$ php artisan serve

でサーバーを立ち上げ、表示されたURLを、frontend/vue.config.js内の、

 devServer: {
   proxy: <Laravel開発サーバーのURL>
 },

へ編集し、

$ npm run serve

でVue開発を進める具合です。