Laravel 5.6 - 使用 laravel-mix 拆分 vuejs 代码答案

【问题标题】：Laravel 5.6 - vuejs code splitting with laravel-mixLaravel 5.6 - 使用 laravel-mix 拆分 vuejs 代码
【发布时间】：2018-07-26 02:51:55
【问题描述】：

我正在尝试将我的 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 的错误：

Uncaught (in promise) TypeError: Cannot read property '__esModule' of 未定义

我是webpack 的新手。这里似乎有什么问题？我该如何解决这个问题？

【问题讨论】：

标签： javascript laravel webpack vuejs2

【解决方案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')

【讨论】：

我已经尝试过和你一样的操作，但我收到了 [Vue warn]: Unknown custom element 错误。您是否像往常一样使用自定义元素？
@AlexGodbehere 这里也一样。你搞清楚了吗？
我没有收到错误，我安装了 babel-plugin-syntax-dynamic-import 并在 app.js 中声明我的组件，就像Vue.component('add-student-form', () => import('./components/AddStudentForm')) 一样工作，谢谢。