Laravel + Vue-cliを使用した SPAの構築

####バージョンを指定してLaravelのプロジェクトを作成 ####

  composer create-project "laravel/laravel=6.*" laravel_sample

サーバーを起動させる　####

プロジェクトディレクトリに移動

 cd laravel_sample

下記コマンドを打つ

  php artisan serve 　

サーバー起動後、( http://localhost:8000 )にアクセスしてLaravelのTOP画面が表示されていればOK

Vue-cliプロジェクトとLaravelとの連携　####

Vueをnodeの(npm)を使用してローカルインストール

npm install --save-dev vue-cli

作成済みのlaravelのディレクトリに移動してVue-cliのプロジェクトを作成　#####

①プロジェクト作成する為下記コマンドを入力。

vue create vue_sample

②インストール方法をdefaultかManuallyかを選択します。
　　　(今回はSPAを構築するのでManuallyを選んでください。)

Vue CLI v*.*.*
 ? Please pick a preset:
   default (babel, eslint)
 > Manually select features

③必要な機能を選択します。
　　　(今回はBabel・Router・Linterの3個を選択します)

? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Use history mode for router? (Requires proper server setup for index fallback in production): Yes

? Pick a linter / formatter config: Basic

? Pick additional lint features: Lint on save

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

Vueで Single Page アプリケーションの作成準備

├─src/
　├─assets/
　├─components/
  ├─router/
　├─views/
　├─App.vue　　　       　
  └─main.js

Vueアプリケーションをlaravel上で立ち上げる　#####

①プロジェクト直下に配置されている(public)ディレクトリのindex.htmlファイルをプロジェクト直下のディレクトリに置き直しファイル名をbase.htmlに変更

②Vue.config.jsファイルを作成し下記のように変更

module.exports = {

    outputDir: '../public/app',

    publicPath: '/app',

    // src
    pages: {
       
        src: {
            entry: 'src/main.js',
            template: 'templates/base.html',
            filename: '../../resources/views/spa/apli.blade.php',
        },
    },
};

Vue-cli側で作成したコードを配信する為にlaravel側に新たにControllerを作成

 php artisan make:controller SpaController

作成したcontrollerファイルに下記のコードを追記

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function app()
    {
        return view('spa/apli');
    }
}

laravel側のroutes/web.phpファイルに下記のルートを追記

Route::get('/apli{any}', 'SpaController@app')->where('any', '(/?$|/.*)');

#####Vue-cliのディレクトリに移動して ビルドする

npm run build

#####配信されるURLを整える #####
プロジェクト名\src\router\index.jsを下記のように変更

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,

　↓↓↓

export default new Router({
  mode: 'history',
  base: '/apli/', 

###ラストに Vueのプロジェクトのディレクトリにてnpm run build でビルドをして完了です。
###確認の為アクセスしてみましょう。
####URL( http://localhost:8000/apli)####
####アクセス時VueのTOP画面が表示されていればOK

こちらのサイダス技術者ブログさんを参考に記事を書いています(https://tech.cydas.com/entry/vue-laravel-mspa1)