laravelmix配置vue的懒加载组件

larave-mix version: v4.1.2

安装依赖

yarn add babel-plugin-syntax-dynamic-import --save-dev
yarn add  babel-plugin-dynamic-import-webpack --save-dev

.baberc

增加:

    "plugins": [
        ["syntax-dynamic-import"]
    ]

webpack.config.js

增加:

mix.config.webpackConfig.output = {
  chunkFilename: 'js/[name].bundle.js',
  publicPath: 'public/dist/js',
};

引入组件改为:

//Vue.component('post-content-vue', require('../components/PostContent'));

PostContent = ()=>import(/* webpackChunkName: "post-content" */'../components/PostContent');
Vue.component('post-content-vue', PostContent);

Enjoy.