Laravel 5.6 - Laravel-mix를 사용한 vuejs 코드 분할

Laravel 5.6 - Laravel-mix를 사용한 vuejs 코드 분할

나는 내 코드에서 코드를 분리하려고 한다.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'));

이 링크에 이어, 아래는 나의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-mobilesputed out:

그런데 페이지를 실행했을 때 에러가 발생했습니다.vendor.js:

미포함(약속)TypeError: 정의되지 않은 속성 '_esModule'을 읽을 수 없습니다.

나는 에 대해 꽤 초보입니다.webpack여기 뭐가 문제인 것 같아?어떻게 하면 해결할 수 있을까요?

해결책을 찾았어요.

알고 보니, 우리는 이 모든 것을 망칠 필요가 없다.webpack우선, 인스톨 할 필요가 있습니다.babel-plugin-syntax-dynamic-import.

그럼 그냥...app.js, 다음 행을 변경합니다.

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

대상:

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

언급URL : https://stackoverflow.com/questions/51530306/laravel-5-6-vuejs-code-splitting-with-laravel-mix