Laravel 5.6-使用laravel-mix

Question

我正在尝试将代码从我的vue文件中拆分为一些较小的文件，该文件仅在特定路径中使用。

例如，我有一个mobile.vue组件，仅在用户使用移动设备时显示。

最初，如果我不拆分代码，这就是将vue component转换为app.js的方式：

require('./bootstrap');///typical for laravel to have a bootstrap.js for other pages.

window.Vue = require('vue');

Vue.component('v-mobile', require('./components/MobileComponent.vue'));

在this link之后，以下是我的app.js：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('v-mobile', (resolve) => {
  import(/* webpackChunkName: "/js/v-mobile" */'./components/MobileComponent.vue')
    .then((MobileComponent) => {
      resolve(MobileComponent.default);
    });
});

我确实用webpack.mix.js分离了其他软件包：

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

mix.js('resources/assets/js/app.js', 'public/js')
.extract(['jquery', 'vue', 'axios'])
.sass('resources/assets/sass/app.scss', 'public/css');

在我nom run watch的时候，我可以看到我的v-mobile随地吐痰：

但是，当我运行页面时，我收到vendor.js的错误消息：

  

未捕获（承诺）TypeError：无法读取的属性'__esModule'   未定义

我对webpack很陌生。这里似乎是什么问题？我该如何解决？

Answer 1

我找到了解决方法。

事实证明，我们无需惹恼webpack。首先，您需要安装babel-plugin-syntax-dynamic-import。

然后仅在app.js中更改此行：

Vue.component('vmobile', require('./components/MobileComponent.vue'));

收件人：

const vmobile = ()=> import(/* webpackChunkName: "./js/vmobile" */'./components/MobileComponent.vue')