Laravel6 + Vue-CLI + Vue-Router 最短SPA構築

#はじめに
Laravel6とVue-CLIで手軽にSPAを開発したかった。
元のディレクトリ構成をいじらずに簡単に出来るようにしたかった。
Vue-Routerの初期設定ではURLに「/app」が付いてしまうので、これを排除したかった。
VuetifyがまだVue3に対応していないのでVue2にて作成。
自分用にやり方をまとめる。

#参考
https://qiita.com/bokuranokyo/items/1b14852c09395bf99941

#やり方

１．Laravel6のインストール

コマンドプロンプトにて

composer create-project laravel/laravel test "6.*"

２．Vue-CLIのインストール

Routerの選択を忘れずに。

cd test
npm install -g @vue/cli

vue create frontend

? Please pick a preset……
>Manually select features

? Check the features needed for your project……　
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router   //Router選択
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
 
 Choose a version of Vue.js that you want ……　
> 2.x

以下すべてEnterキー。

３．vue.config.jsファイルの作成

test\frontendフォルダ内に、以下の内容のvue.config.jsを作る

test\frontend\vue.config.js

module.exports = {
    outputDir: '../public/app',
    publicPath: '/app',
    pages: {
        index: {
            entry: 'src/main.js',
            template: 'public/index.html', 
            filename: '../../resources/views/index.blade.php',
        },
    },
};

４．Vue-RouterのベースURL設定

test\frontend\src\router\index.js

const router = new VueRouter({
  mode: 'history',
  base: "/",  //書き換え
  routes
})

５．Laravelのルート設定

```test\routes\web.php /* Web Routes --------------------------------------------------------------------------

|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/{any?}', fn() => view('index'))->where('any', '.*');

<h3>６．ビルドで完成</h3>

コマンドプロンプトにて

cd frontend
npm run build

完成です。

#まとめ
簡潔ですが、やり方をまとめました。
最後までご覧いただきありがとうございます。