記一次 Laravel-mix 使用 vue 路由懶載入填坑

zh117發表於2019-04-23
LaravelVue路由

簡介
嘗試在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();

重新執行編譯，報錯消失。

相關文章