ここまで理解してから次へ。

.babelrc は新規作成すること。

.babelrc


{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

webpack.min.js はサーバーから vim で直接変更する！
FTP使ったりパーミッション変更するとバグるので。

キャッシュ対策も追加。
hash ってやっとくことで、キャッシュされなくなる。

webpack.mix.js



const mix = require('laravel-mix');


mix.webpackConfig({

    output: {
        chunkFilename: 'js/chunks/[name]-[hash].js',
//chunkFilename: 'js/chunks/[name].js',
        publicPath: '/'
            }
});


//読み込みたいフォルダを指定しておく
mix.js('resources/js/app.js', 'public/js','public/js/chunks/').version()
     .autoload({
         "vue": ['Vue', 'window.Vue']
     })

    .sass('resources/sass/app.scss', 'public/css');

vue.blade.php


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app" v-cloak>
        <router-view></router-view>
</div>

<script src="{{mix('js/app.js')}}"></script>
</body>
</html>

Top.vue


<template>

    <div>
        <router-link to="/layout">レイアウトに移動</router-link>
    </div>

</template>

<script>
    export default {
        title: 'top'
    }
</script>

Layout.vue



<template>



    <div>

        移動成功！

    </div>


</template>
<script>

    export default {

    }
</script>

app.js


import VueRouter from 'vue-router';
Vue.use(VueRouter);


const Top = () => import('./components/Top.vue');
const Layout = () => import('./components/Layout.vue');

var routes = [
    { path: '/', component: Top},
    { path: '/layout', component: Layout , meta: { title: 'レイアウト' }},
];

const router = new VueRouter({
    mode:'history',
    routes,
});

var app;
app = new Vue({
    el: '#app',
    router,
});

一応キャッシュファイルがてんこ盛りできるとあれなので。

package.json



{
    "scripts": {
        "predevelopment": "npm run clean",
        "clean": "rimraf public/js/chunks",

        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development (略)"
    },
}

npm run clean でゴミファイルすべて削除できちゃうぜ。