いやー引くほどハマった。
遅延ローディングのまとめ。
・node.js最新か？ (yumだと古いの入るので注意)
・npm最新か？
・node_modules を削除
・package-lock.json を削除
そんでもって再度インストールね。
参考
https://qiita.com/ykatsu/items/e373e8479f6c9a832f5d
キャッシュが残るので、デバッグはChromeシークレットモード。
キャッシュをオフにしてやる。
ここまで理解してから次へ。
.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 で ゴミファイルすべて削除できちゃうぜ。