브라우저를 사용하여 비동기/게을 로드 Vue 구성 요소

브라우저를 사용하여 비동기/게을 로드 Vue 구성 요소

나는 내 app.js 파일에 많은 Vue.js 구성 요소를 로드하려고 한다(엘릭시르를 통해 브라우저/vueify를 사용).

모든 구성 요소를 한 번에 로드하는 대신 개별 vue 구성 요소가 필요할 때 vue 라우터를 사용하여 느리게 로드하고 싶다.

파일을 어디에 설정하고 어떻게 구성해야 하는가?

그 순간, 나는 다음과 같은 메인 app.js 파일을 묶었다.

import Vue from 'vue';
import Resource from 'vue-resource';
import VueRouter from 'vue-router';

// These are the components that I wish to lazy load:
// import Users from './components/Users.vue';
// import Sales from './components/Sales.vue';
// import Projects from './components/Projects.vue';
// import Dashboard from './components/Dashboard.vue';
// import Receipts from './components/Receipts.vue';

Vue.use(Resource);
Vue.use(VueRouter);

var router = new VueRouter();

router.map({
  '/async': {
    component: function (resolve) {
      loadjs(['./components/Users.vue'], resolve)
    }
  }
})

여기 내가 갇힌 곳이 있다.

1. 위에 나열된 모든 .vue 구성 요소를 기능에 게으르게 로드하려면 어떻게 해야 하는가?
2. 위의 파일을 어떻게 설정하며, 어디에 저장해야 하는가?

설명서 https://vuejs.org/v2/guide/components.html#Async-Components에서 확인하십시오.

만약 당신이 비동기 구성요소를 사용하고자 하는 Browserify 사용자라면, 그것의 제작자는 불행하게도 비동기 로딩은 "브라우저ify가 결코 지원할 수 있는 것이 아니다"라는 것을 분명히 했다.공식적으로는, 적어도.Browserify 커뮤니티는 기존 응용프로그램과 복잡한 응용프로그램에 도움이 될 수 있는 몇 가지 해결 방법을 발견했다.다른 모든 시나리오의 경우, 기본 제공, 1급 비동기식 지원에 웹 팩을 사용하는 것이 좋다.

참조URL: https://stackoverflow.com/questions/37278018/async-lazy-load-vue-components-with-browserify