はじめに

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

参考

やり方

１．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

<?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', '.*');

６．ビルドで完成