Javascript Laravel 5.6-使用Laravel mix进行vuejs代码拆分

我正在尝试将我的

vue

文件中的代码拆分为一些仅在特定路径中使用的较小文件

例如，我有一个

mobile.vue

组件，它只在用户使用移动设备时显示

最初，如果我不拆分代码，这就是如何将

vue组件

拆分为

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'));

require('./bootstrap');

window.Vue = require('vue');

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

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');

下面是我的

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'));

require('./bootstrap');

window.Vue = require('vue');

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

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');

我用

webpack.mix.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'));

require('./bootstrap');

window.Vue = require('vue');

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

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

得到一个错误：

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'));

require('./bootstrap');

window.Vue = require('vue');

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

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');

未捕获（承诺中）TypeError:无法读取的属性“\uu esModule” 未定义

---

我对

webpack

相当陌生。这里的问题是什么？如何解决这个问题？

我找到了解决方案

事实证明，我们不需要弄乱

webpack

。首先，您需要安装

babel插件语法动态导入

然后在

app.js

中，更改这一行：

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

致：

---

我也尝试过这样做，但遇到了一个

[Vue warn]：未知自定义元素的错误。您是否像往常一样使用自定义元素？@AlexGodbehe这里也一样。你找到答案了吗？我没有发现错误，我安装了babel插件语法动态导入，并在app.js中声明了我的组件，就像这样
Vue.component（'add-student-form'，（）=>import（'./components/AddStudentForm'））
工作得很好，谢谢。