记一次 Laravel-mix 使用 vue 路由懒加载填坑

简介
尝试在laravel中进行与vue脚手架一致的开发体验，在配置路由懒加载时遇到了一些问题。

安装
yarn add vue-router --save

填坑
路由代码中

{
    path: '/auth/register',
    name: 'Register',
    component: () => import('@/views/auth/Register')
  }

其中的component: () => import('@/views/auth/Register')懒加载会报错。

此时首先安装yarn add babel-plugin-dynamic-import-webpack --save-dev。

继续报错，搜索后知道是还需要对webpack进行一些配置。但是laravel-mix没有webpack的配置文件，查阅文档后几经尝试。最终在webpack.mix.js文件中添加如下代码：

mix.extend(
    'foo',
    new class {
        webpackRules() {
            return {
                test: /\.js/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        "babelrc": false,
                        "plugins": [
                            "dynamic-import-webpack"
                        ]
                    }
                }]
            };
        }
    }()
);

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version().foo();

重新执行编译，报错消失。

本作品采用《CC 协议》，转载必须注明作者和本文链接